Author: | docode |
---|---|
Views Total: | 17,524 views |
Official Page: | Go to website |
Last Update: | May 17, 2015 |
License: | MIT |
Preview:

Description:
A pure HTML / CSS background slideshow that uses CSS3 animations to create ken burns effect (image panning and zooming) during image transitions.
How to use it:
Build the html structure for the background slideshow using figure
tag.
<div class="pic-wrapper"> <figure class="pic-1"></figure> <figure class="pic-2"></figure> <figure class="pic-3"></figure> <figure class="pic-4"></figure> </div>
Style the slideshow and make it fullscreen.
* { margin: 0; padding: 0; } .pic-wrapper { position: absolute; width: 100%; height: 100%; overflow: hidden; } figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; /*animation*/ animation: slideShow 24s linear infinite 0s; -o-animation: slideShow 24s linear infinite 0s; -moz-animation: slideShow 24s linear infinite 0s; -webkit-animation: slideShow 24s linear infinite 0s; }
Add background images into the slideshow.
.pic-1 { opacity: 1; background: url(1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-2 { animation-delay: 6s; -o-animation-delay: 6s; -moz--animation-delay: 6s; -webkit-animation-delay: 6s; background: url(2.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-3 { animation-delay: 12s; -o-animation-delay: 12s; -moz--animation-delay: 12s; -webkit-animation-delay: 12s; background: url(3.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-4 { animation-delay: 18s; -o-animation-delay: 18s; -moz--animation-delay: 18s; -webkit-animation-delay: 18s; background: url(4.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Create the ken burns effect using keyframes.
@keyframes slideShow { 0% { opacity: 0; transform:scale(1); -ms-transform:scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; transform:scale(1.1); -ms-transform:scale(1.1); } 100% { opacity: 0; transform:scale(1); -ms-transformm:scale(1); } } @-o-keyframes slideShow { 0% { opacity: 0; -o-transform:scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; -o-transform:scale(1.1); } 100% { opacity: 0; -o-transformm:scale(1); } } @-moz-keyframes slideShow { 0% { opacity: 0; -moz-transform:scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; -moz-transform:scale(1.1); } 100% { opacity: 0; -moz-transformm:scale(1); } } @-webkit-keyframes slideShow { 0% { opacity: 0; -webkit-transform:scale(1); } 5% { opacity: 1 } 25% { opacity: 1; } 30% { opacity: 0; -webkit-transform:scale(1.1); } 100% { opacity: 0; -webkit-transformm:scale(1); } }
Neither the demo nor the download even work.
Works fine. Just need to know how to add more than 4 “slides”. Keyframes need to be recalculated….right?
Just what I was looking for. Thanks a lot :-)