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 |
Carousel | 3,349 Kb |
Burton Ball | 4,499 Kb |
Juggle | 3,302 Kb |
Cross-Browser Range Input With Solid Lower Fill | 1,912 Kb |
CSS Jellyfish | 5,609 Kb |
Colored SVG background-image - Mask Method | 2,328 Kb |
3D CSS Text with Perspective | 4,044 Kb |
Responsive Image Grid using SVG wrappers | 3,859 Kb |
Free Radicals | 33,329 Kb |
SVG Christmas Light Icon Animated with CSS | 2,224 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 |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
Button fills | Zubfatal | 5,205 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 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!