Author: | craigraphics |
---|---|
Views Total: | 55,608 views |
Official Page: | Go to website |
Last Update: | February 5, 2016 |
License: | MIT |
Preview:

Description:
A fullscreen background slideshow with a crossfade transition effect built only with HTML and CSS/CSS3.
How to use it:
Build the html structure for the background slideshow.
<div class="crossfade"> <figure></figure> <figure></figure> <figure></figure> <figure></figure> <figure></figure> </div>
The core CSS styles.
.crossfade > figure { animation: imageAnimation 30s linear infinite 0s; backface-visibility: hidden; background-size: cover; background-position: center center; color: transparent; height: 100%; left: 0px; opacity: 0; position: absolute; top: 0px; width: 100%; z-index: 0; }
Add background images to the slideshow.
.crossfade > figure:nth-child(1) { background-image: url('1.jpg'); } .crossfade > figure:nth-child(2) { animation-delay: 6s; background-image: url('2.jpg'); } .crossfade > figure:nth-child(3) { animation-delay: 12s; background-image: url('3.jpg'); } .crossfade > figure:nth-child(4) { animation-delay: 18s; background-image: url('4.jpg'); } .crossfade > figure:nth-child(5) { animation-delay: 24s; background-image: url('5.jpg'); }
Create the crossfade effect using CSS3 animations.
@keyframes imageAnimation { 0% { animation-timing-function: ease-in; opacity: 0; } 8% { animation-timing-function: ease-out; opacity: 1; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } }
Hi, how can i put a menu on the slideshow? When i do it my menu just fades away with the picture.
In .crossfade > figure set z-index to -1 instead of 0, that did the trick for me
Hi, Thanks a lot for sharing! It works perfect on my site.
This works well but I’ve tried to reduce to 3 images by removing the 2 elements and the corresponding css. I also reduced the animation time from 30s to 18s. However, there is a delay between the images so I suspect the @keyframes need adjusting? Any ideas what these values should be? Can you explain what the @keyframes is doing? Thanks, Chet
Great Tutorial, thanks. Is there a way to add text to each image?
Hey! Thx, it’s g https://uploads.disquscdn.com/images/cc469e1ae3ab309e774f990df4321f4c6a5e3261c6fe4f0fe4821e88c33aa2da.png ood, I’m using it for a slide background section. I just want to speed the crossfade effect using CSS3 animations. I don’t understand all % css attribution :/ Can you help me?
how to put some text UNDER the slideshow?
how to put some text UNDER the slideshow?
Thanks a lot. This worked for me too.