Author: | klesht |
---|---|
Views Total: | 26,177 views |
Official Page: | Go to website |
Last Update: | May 14, 2015 |
License: | MIT |
Preview:

Description:
A pure HTML / CSS approach to creating a responsive fullscreen background slideshow that uses CSS3 animations for cross-fade transition effects.
How to use it:
Create a list of slides for the slideshow.
<ul class="slideshow"> <li> <span>Slide One</span> </li> <li> <span>Slide Two</span> </li> <li> <span>Slide Three</span> </li> <li> <span>Slide Four</span> </li> </ul>
Style the slideshow.
html { min-height: 100%; } body { height: 100%; } .slideshow { list-style: none; z-index: 1; } .slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: imageAnimation 24s linear infinite 0s; -moz-animation: imageAnimation 24s linear infinite 0s; animation: imageAnimation 24s linear infinite 0s; } .no-cssanimations .slideshow li span { opacity: 1; }
Create the crossfade animations by changing the opacity level using @keyframes.
@-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 12.5% { opacity: 1; -webkit-animation-timing-function: ease-out; } 25% { opacity: 1; } 37.5% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 12.5% { opacity: 1; -moz-animation-timing-function: ease-out; } 25% { opacity: 1; } 37.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 12.5% { opacity: 1; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { opacity: 1; } 37.5% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes titleAnimation { 0% { opacity: 0; } 12.5% { opacity: 1; } 25% { opacity: 1; } 37.5% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes titleAnimation { 0% { opacity: 0; } 12.5% { opacity: 1; } 25% { opacity: 1; } 37.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes titleAnimation { 0% { opacity: 0; } 12.5% { opacity: 1; } 25% { opacity: 1; } 37.5% { opacity: 0; } 100% { opacity: 0; } }
Add background images to the slideshow.
.slideshow li:nth-child(1) span { background-image: url(1.jpg); } .slideshow li:nth-child(2) span { background-image: url(2.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; animation-delay: 6s; } .slideshow li:nth-child(3) span { background-image: url(3.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; animation-delay: 12s; } .slideshow li:nth-child(4) span { background-image: url(4.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; animation-delay: 18s; }