3D List expansion
How do I make an 3d list expansion?
Playing with an idea for my portfolio. Picking up 3 discs and dropping them down to form a list.. What is a 3d list expansion? How do you make a 3d list expansion? This script and codes were developed by Andrew Canham on 23 August 2022, Tuesday.
3D List expansion - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D List expansion</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="holder"> <div class="dot dot1 top"> <svg x="0px" y="0px" viewBox="0 0 101 101" xml:space="preserve"> <path id="XMLID_17_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M62.2,76.3H38.8c-1,0-1.9-0.8-1.9-1.9v-1.8c0-1,0.8-1.9,1.9-1.9h23.3c1,0,1.9,0.8,1.9,1.9v1.8C64,75.5,63.2,76.3,62.2,76.3z"/> <path id="XMLID_16_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M79.6,39.9c0-16.1-13-29.1-29.1-29.1s-29.1,13-29.1,29.1c0,11.2,6.3,20.9,15.6,25.8c0,0.1,0,0.1,0,0.2V68c0,1.5,1.2,2.8,2.8,2.8 h21.5c1.5,0,2.8-1.2,2.8-2.8v-2.1c0-0.1,0-0.1,0-0.2C73.3,60.9,79.6,51.1,79.6,39.9z"/> <path id="XMLID_15_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M62.2,81.9H38.8c-1,0-1.9-0.8-1.9-1.9v-1.8c0-1,0.8-1.9,1.9-1.9h23.3c1,0,1.9,0.8,1.9,1.9V80C64,81.1,63.2,81.9,62.2,81.9z"/> <path id="XMLID_14_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M62.2,87.4H38.8c-1,0-1.9-0.8-1.9-1.9v-1.8c0-1,0.8-1.9,1.9-1.9h23.3c1,0,1.9,0.8,1.9,1.9v1.8C64,86.6,63.2,87.4,62.2,87.4z"/> <path id="XMLID_13_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M42.9,87.4c0,1.5,1.2,2.8,2.8,2.8s2.8-1.2,2.8-2.8"/> <path id="XMLID_10_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M52.6,87.4c0,1.5,1.2,2.8,2.8,2.8s2.8-1.2,2.8-2.8"/> <line id="XMLID_19_" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="37.5" y1="40.8" x2="47.5" y2="70.8"/> <line id="XMLID_18_" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="63.5" y1="40.8" x2="53.5" y2="70.8"/> </svg> </div> <div class="dot dot2 mid"> <svg x="0px" y="0px" viewBox="0 0 101 101" xml:space="preserve"> <g id="XMLID_56_"> <path id="XMLID_22_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M78.2-8.2C55.8,14.1,46.2,19.1,46.2,19.1L65,38l18.9,18.9c0,0,4.9-9.7,27.3-32.1"/> <polygon id="XMLID_54_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" points=" 65,38 46.2,19.1 22.5,69.4 28.1,74.9 33.6,80.4 83.9,56.8 "/> <path id="XMLID_52_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M23.3,70.2c-2.6,2.6-2.6,6.8,0,9.4c2.6,2.6,6.8,2.6,9.4,0L23.3,70.2z"/> </g> </svg> </div> <div class="dot dot3 btm"> <svg x="0px" y="0px" viewBox="0 0 101 101" xml:space="preserve"> <g id="XMLID_121_"> <line id="XMLID_139_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="-25.9" y1="36.1" x2="27.8" y2="5.1"/> <line id="XMLID_138_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" x1="82.1" y1="36.1" x2="28.3" y2="67.1"/> <polyline id="XMLID_137_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" points=" 28.3,5.1 82.1,36.1 82.1,74.1 28.3,105.1 "/> <polygon id="XMLID_136_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" points=" 27.8,105.1 -25.9,74.1 -25.9,36.1 27.8,67.1 "/> <ellipse id="XMLID_135_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" cx="28.7" cy="42.9" rx="11.1" ry="5.1"/> <path id="XMLID_134_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M17.6,42.9v7c0,2.8,5,5.1,11.1,5.1s11.1-2.3,11.1-5.1v-7"/> <ellipse id="XMLID_133_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" cx="28.7" cy="18.4" rx="11.1" ry="5.1"/> <path id="XMLID_132_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M17.6,18.4v7c0,2.8,5,5.1,11.1,5.1s11.1-2.3,11.1-5.1v-7"/> <ellipse id="XMLID_131_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" cx="3" cy="30.8" rx="11.1" ry="5.1"/> <path id="XMLID_130_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M-8.1,30.8v7c0,2.8,5,5.1,11.1,5.1S14,40.6,14,37.8v-7"/> <ellipse id="XMLID_129_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" cx="54" cy="30.8" rx="11.1" ry="5.1"/> <path id="XMLID_123_" fill="none" stroke="#FFFFFF" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d=" M42.9,30.8v7c0,2.8,5,5.1,11.1,5.1s11.1-2.3,11.1-5.1v-7"/> </g> </svg> </div> <ul class="titles"> <li class="title1 title-animate"> Thinker </li> <li class="title2 title-animate"> Designer </li> <li class="title3 title-animate"> Maker </li> </ul>
</div>
<a href="#" class="reset"> Replay
</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
3D List expansion - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200,600,700,900);
body { font-family: 'Source Sans Pro', sans-serif; font-weight: 200;
}
a.reset { background: #787f81; border-radius: 24px; bottom: 20px; color: #fff; display: block; left: 50%; margin-left: -70px; padding: 8px 0; position: absolute; text-align: center; text-decoration: none; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; width: 140px;
}
a.reset:hover { background: #535859; text-decoration: none;
}
div.holder { position: absolute; left: 50%; margin: -50px 0 0 -50px; top: 50%;
}
ul.titles { margin: 0; padding: 0;
}
ul.titles li { height: 100px; font-size: 48px; line-height: 2em; list-style: none; margin: 0; opacity: 0; padding: 0; position: absolute; text-transform: uppercase;
}
ul.titles li.title1 { -webkit-transform: translate3d(0, -125%, 0); transform: translate3d(0, -125%, 0);
}
ul.titles li.title2 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
ul.titles li.title3 { -webkit-transform: translate3d(0, 125%, 0); transform: translate3d(0, 125%, 0);
}
ul.titles li.title-animate.title1 { -webkit-animation: title-animate1 1s 1 1.2s forwards; animation: title-animate1 1s 1 1.2s forwards;
}
ul.titles li.title-animate.title2 { -webkit-animation: title-animate2 1.25s 1 1.4s forwards; animation: title-animate2 1.25s 1 1.4s forwards;
}
ul.titles li.title-animate.title3 { -webkit-animation: title-animate3 1.5s 1 1.8s forwards; animation: title-animate3 1.5s 1 1.8s forwards;
}
div.dot { background: #8599b0; border-radius: 100px; height: 100px; overflow: hidden; position: absolute; width: 100px;
}
div.dot.top { z-index: 15;
}
div.dot.mid { z-index: 10;
}
div.dot.btm { z-index: 5;
}
div.dot.dot1 { -webkit-animation: pickup1 1.5s 1 forwards; animation: pickup1 1.5s 1 forwards;
}
div.dot.dot2 { -webkit-animation: pickup2 1.5s 1 forwards; animation: pickup2 1.5s 1 forwards;
}
div.dot.dot3 { -webkit-animation: pickup3 1.5s 1 forwards; animation: pickup3 1.5s 1 forwards;
}
@-webkit-keyframes title-animate1 { 0% { opacity: 0; -webkit-transform: translate3d(0, -125%, 0); transform: translate3d(0, -125%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(-75px, -125%, 0); transform: translate3d(-75px, -125%, 0); }
}
@keyframes title-animate1 { 0% { opacity: 0; -webkit-transform: translate3d(0, -125%, 0); transform: translate3d(0, -125%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(-75px, -125%, 0); transform: translate3d(-75px, -125%, 0); }
}
@-webkit-keyframes title-animate2 { 0% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(-75px, 0, 0); transform: translate3d(-75px, 0, 0); }
}
@keyframes title-animate2 { 0% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(-75px, 0, 0); transform: translate3d(-75px, 0, 0); }
}
@-webkit-keyframes title-animate3 { 0% { opacity: 0; -webkit-transform: translate3d(0, 125%, 0); transform: translate3d(0, 125%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(-75px, 125%, 0); transform: translate3d(-75px, 125%, 0); }
}
@keyframes title-animate3 { 0% { opacity: 0; -webkit-transform: translate3d(0, 125%, 0); transform: translate3d(0, 125%, 0); } 100% { opacity: 1; -webkit-transform: translate3d(-75px, 125%, 0); transform: translate3d(-75px, 125%, 0); }
}
@-webkit-keyframes pickup1 { 0% { background: #8599b0; box-shadow: 0 0 0 rgba(0, 0, 0, 0.3); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } 50% { background: #94a6ba; box-shadow: 0 100px 30px rgba(0, 0, 0, 0.1); -webkit-transform: scale3d(1.3, 0.9, 1) translate3d(0, -150%, 0); transform: scale3d(1.3, 0.9, 1) translate3d(0, -150%, 0); } 100% { background: #8599b0; box-shadow: none; -webkit-transform: scale3d(1, 1, 1) translate3d(-200%, -125%, 0); transform: scale3d(1, 1, 1) translate3d(-200%, -125%, 0); }
}
@keyframes pickup1 { 0% { background: #8599b0; box-shadow: 0 0 0 rgba(0, 0, 0, 0.3); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } 50% { background: #94a6ba; box-shadow: 0 100px 30px rgba(0, 0, 0, 0.1); -webkit-transform: scale3d(1.3, 0.9, 1) translate3d(0, -150%, 0); transform: scale3d(1.3, 0.9, 1) translate3d(0, -150%, 0); } 100% { background: #8599b0; box-shadow: none; -webkit-transform: scale3d(1, 1, 1) translate3d(-200%, -125%, 0); transform: scale3d(1, 1, 1) translate3d(-200%, -125%, 0); }
}
@-webkit-keyframes pickup2 { 0% { background: #8599b0; box-shadow: 0 0 0 rgba(0, 0, 0, 0.4); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } 50% { background: #8ea1b6; box-shadow: 0 80px 20px rgba(0, 0, 0, 0.15); -webkit-transform: scale3d(1.15, 0.9, 1) translate3d(0, -100%, 0); transform: scale3d(1.15, 0.9, 1) translate3d(0, -100%, 0); } 100% { background: #8599b0; box-shadow: none; -webkit-transform: scale3d(1, 1, 1) translate3d(-200%, 0, 0); transform: scale3d(1, 1, 1) translate3d(-200%, 0, 0); }
}
@keyframes pickup2 { 0% { background: #8599b0; box-shadow: 0 0 0 rgba(0, 0, 0, 0.4); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } 50% { background: #8ea1b6; box-shadow: 0 80px 20px rgba(0, 0, 0, 0.15); -webkit-transform: scale3d(1.15, 0.9, 1) translate3d(0, -100%, 0); transform: scale3d(1.15, 0.9, 1) translate3d(0, -100%, 0); } 100% { background: #8599b0; box-shadow: none; -webkit-transform: scale3d(1, 1, 1) translate3d(-200%, 0, 0); transform: scale3d(1, 1, 1) translate3d(-200%, 0, 0); }
}
@-webkit-keyframes pickup3 { 0% { background: #8599b0; box-shadow: 0 0 0 rgba(0, 0, 0, 0.5); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } 50% { background: #889cb2; box-shadow: 0 60px 10px rgba(0, 0, 0, 0.3); -webkit-transform: scale3d(1.075, 0.9, 1) translate3d(0, -50%, 0); transform: scale3d(1.075, 0.9, 1) translate3d(0, -50%, 0); } 100% { background: #8599b0; box-shadow: none; -webkit-transform: scale3d(1, 1, 1) translate3d(-200%, 125%, 0); transform: scale3d(1, 1, 1) translate3d(-200%, 125%, 0); }
}
@keyframes pickup3 { 0% { background: #8599b0; box-shadow: 0 0 0 rgba(0, 0, 0, 0.5); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } 50% { background: #889cb2; box-shadow: 0 60px 10px rgba(0, 0, 0, 0.3); -webkit-transform: scale3d(1.075, 0.9, 1) translate3d(0, -50%, 0); transform: scale3d(1.075, 0.9, 1) translate3d(0, -50%, 0); } 100% { background: #8599b0; box-shadow: none; -webkit-transform: scale3d(1, 1, 1) translate3d(-200%, 125%, 0); transform: scale3d(1, 1, 1) translate3d(-200%, 125%, 0); }
}
3D List expansion - Script Codes JS Codes
$("a.reset").click(function(e){ e.preventDefault(); $("div.top").removeClass("dot1"); $("div.mid").removeClass("dot2"); $("div.btm").removeClass("dot3"); $("li.title-animate").removeClass("title-animate"); setTimeout(function(){ $("div.top").addClass("dot1"); $("div.mid").addClass("dot2"); $("div.btm").addClass("dot3"); $("ul.titles li").addClass("title-animate"); }, 500);
});
Developer | Andrew Canham |
Username | candroo |
Uploaded | August 23, 2022 |
Rating | 4.5 |
Size | 4,719 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Spread cards | 4,442 Kb |
Hover effect | 2,719 Kb |
Cube grid | 2,943 Kb |
Cloxperiment | 3,514 Kb |
Faux 3D grid | 2,284 Kb |
Social media footer | 5,281 Kb |
Faux 3D grid with image reveal | 2,667 Kb |
Wrinkle links | 4,205 Kb |
Motivational message | 4,007 Kb |
Color hover buttons | 2,840 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!