Coverflow
How do I make an coverflow?
A silly Sass CSS mixin to generate coverflow-style animations.. What is a coverflow? How do you make a coverflow? This script and codes were developed by Mike Fowler on 22 August 2022, Monday.
Coverflow - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Coverflow</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ body { padding: 4em 0; text-align: center; background: #f1f1f1;
}
.coverflow { width: 200px; height: 200px; display: inline-block; position: relative;
}
.coverflow > * { position: absolute; top: 0; left: 0; width: 200px; height: 200px; animation: coverflow 8s ease both infinite;
}
.coverflow :nth-child(2) { animation-delay: 1s;
}
.coverflow :nth-child(3) { animation-delay: 2s;
}
.coverflow :nth-child(4) { animation-delay: 3s;
}
.coverflow :nth-child(5) { animation-delay: 4s;
}
.coverflow :nth-child(6) { animation-delay: 5s;
}
.coverflow :nth-child(7) { animation-delay: 6s;
}
.coverflow :nth-child(8) { animation-delay: 7s;
}
.coverflow-item { border-radius: 50%; border: 5px solid white;
}
@keyframes coverflow { 0%, 5% { opacity: 0; transform: translate3d(190px, 0, 0) scale(0.6); } 12.5%, 17.5% { opacity: 0.2; transform: translate3d(170px, 0, 0) scale(0.6); } 25%, 30% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } 37.5%, 42.5% { opacity: 0.2; transform: translate3d(-170px, 0, 0) scale(0.6); } 0%, 50% { opacity: 0; transform: translate3d(-190px, 0, 0) scale(0.6); } 100% { opacity: 0; transform: translate3d(-190px, 0, 0) scale(0.6); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="coverflow"> <img src="http://placehold.it/200x200&text=1" class="coverflow-item"> <img src="http://placehold.it/200x200&text=2" class="coverflow-item"> <img src="http://placehold.it/200x200&text=3" class="coverflow-item"> <img src="http://placehold.it/200x200&text=4" class="coverflow-item"> <img src="http://placehold.it/200x200&text=5" class="coverflow-item"> <img src="http://placehold.it/200x200&text=6" class="coverflow-item"> <img src="http://placehold.it/200x200&text=7" class="coverflow-item"> <img src="http://placehold.it/200x200&text=8" class="coverflow-item">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Coverflow - Script Codes CSS Codes
body { padding: 4em 0; text-align: center; background: #f1f1f1;
}
.coverflow { width: 200px; height: 200px; display: inline-block; position: relative;
}
.coverflow > * { position: absolute; top: 0; left: 0; width: 200px; height: 200px; animation: coverflow 8s ease both infinite;
}
.coverflow :nth-child(2) { animation-delay: 1s;
}
.coverflow :nth-child(3) { animation-delay: 2s;
}
.coverflow :nth-child(4) { animation-delay: 3s;
}
.coverflow :nth-child(5) { animation-delay: 4s;
}
.coverflow :nth-child(6) { animation-delay: 5s;
}
.coverflow :nth-child(7) { animation-delay: 6s;
}
.coverflow :nth-child(8) { animation-delay: 7s;
}
.coverflow-item { border-radius: 50%; border: 5px solid white;
}
@keyframes coverflow { 0%, 5% { opacity: 0; transform: translate3d(190px, 0, 0) scale(0.6); } 12.5%, 17.5% { opacity: 0.2; transform: translate3d(170px, 0, 0) scale(0.6); } 25%, 30% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } 37.5%, 42.5% { opacity: 0.2; transform: translate3d(-170px, 0, 0) scale(0.6); } 0%, 50% { opacity: 0; transform: translate3d(-190px, 0, 0) scale(0.6); } 100% { opacity: 0; transform: translate3d(-190px, 0, 0) scale(0.6); }
}
Developer | Mike Fowler |
Username | mikefowler |
Uploaded | August 22, 2022 |
Rating | 4.5 |
Size | 3,581 Kb |
Views | 44,528 |
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 |
Image Markers | 3,194 Kb |
Page Transitions in Backbone | 3,691 Kb |
Navigation Indicator | 3,472 Kb |
A Pen by Mike Fowler | 3,067 Kb |
Nickname generator | 7,313 Kb |
Rounded Avatar | 3,263 Kb |
Mixtape | 3,691 Kb |
Map Locator Marker | 4,026 Kb |
IOS7 Geolocation Map Marker | 4,359 Kb |
Coverflow Animation | 2,864 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 |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Apex Calculator | Michaelwnelson | 2,370 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Exploring css spinners | Akagr | 3,569 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!