Carousel
How do I make an carousel?
Experimenting with some 2.5d animation technique. What is a carousel? How do you make a carousel? This script and codes were developed by Noah Blon on 24 June 2022, Friday.
Carousel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Carousel</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ #contain { width: 150px; height: 50px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; opacity: 0; animation: fadeIn 1s 1; animation-fill-mode: forwards;
}
.wrap { animation: translate 1000ms infinite ease-in-out alternate, zindex 2000ms infinite ease-in-out; position: absolute;
}
.ball { width: 50px; height: 50px; box-shadow: 0 -6.25px 0 rgba(0, 0, 0, 0.15) inset; background-color: #E3746B; border-radius: 50%; animation: scale 1000ms infinite ease-in-out alternate; animation-delay: -500ms; transform: scale(0.5); border: 2px solid black;
}
.ball:after { content: ''; width: 50px; height: 13px; background: #eee; position: absolute; top: 70px; border-radius: 50%;
}
#wrap2 { animation-delay: -1000ms;
}
#ball2 { background-color: #397BF9; animation-delay: -1500ms;
}
#wrap3 { animation-delay: -1500ms;
}
#ball3 { background-color: #F4B400; animation-delay: -2000ms;
}
#wrap4 { animation-delay: -2500ms;
}
#ball4 { background-color: #0F9D58; animation-delay: -3000ms;
}
@keyframes translate { 100% { transform: translateX(100px); }
}
@keyframes scale { 100% { transform: scale(1); }
}
@keyframes zindex { 25% { z-index: 1; } 75% { z-index: -1; }
}
@keyframes fadeIn { 100% { opacity: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="contain"> <div class='wrap' id='wrap1'> <div class='ball' id='ball1'></div> </div> <div class='wrap' id='wrap2'> <div class='ball' id='ball2'></div> </div> <div class='wrap' id='wrap3'> <div class='ball' id='ball3'></div> </div> <div class='wrap' id='wrap4'> <div class='ball' id='ball4'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Carousel - Script Codes CSS Codes
#contain { width: 150px; height: 50px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; opacity: 0; animation: fadeIn 1s 1; animation-fill-mode: forwards;
}
.wrap { animation: translate 1000ms infinite ease-in-out alternate, zindex 2000ms infinite ease-in-out; position: absolute;
}
.ball { width: 50px; height: 50px; box-shadow: 0 -6.25px 0 rgba(0, 0, 0, 0.15) inset; background-color: #E3746B; border-radius: 50%; animation: scale 1000ms infinite ease-in-out alternate; animation-delay: -500ms; transform: scale(0.5); border: 2px solid black;
}
.ball:after { content: ''; width: 50px; height: 13px; background: #eee; position: absolute; top: 70px; border-radius: 50%;
}
#wrap2 { animation-delay: -1000ms;
}
#ball2 { background-color: #397BF9; animation-delay: -1500ms;
}
#wrap3 { animation-delay: -1500ms;
}
#ball3 { background-color: #F4B400; animation-delay: -2000ms;
}
#wrap4 { animation-delay: -2500ms;
}
#ball4 { background-color: #0F9D58; animation-delay: -3000ms;
}
@keyframes translate { 100% { transform: translateX(100px); }
}
@keyframes scale { 100% { transform: scale(1); }
}
@keyframes zindex { 25% { z-index: 1; } 75% { z-index: -1; }
}
@keyframes fadeIn { 100% { opacity: 1; }
}
Developer | Noah Blon |
Username | noahblon |
Uploaded | June 24, 2022 |
Rating | 4.5 |
Size | 3,349 Kb |
Views | 76,912 |
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 |
3D CSS Text with Perspective | 4,044 Kb |
Juggle | 3,302 Kb |
CSS Jellyfish | 5,609 Kb |
Colored SVG background-image - Mask Method | 2,328 Kb |
Free Radicals | 33,329 Kb |
9 Pens | 3,350 Kb |
Colored SVG background-image - Filter Method | 2,392 Kb |
Burton Ball | 4,499 Kb |
Glitch Pop | 4,644 Kb |
Responsive Image Grid using SVG wrappers | 3,859 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 |
Degree Picker | Idered | 4,307 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
-2 base | Kozanecki_p | 1,641 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Sass Radar | Jlong | 6,887 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!