TIP N3: Dead Simple CSS Slideshow

[⚡JFarrow⌁]

So you want a simple full screen (perhaps even as a background) responsive slideshow.  But you hate javascript.  This is a tip for you.

What we are making is something like this live demo:

Add this to an HTML module in sites and pages:

<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>

Add this to Design Studio and substitute my photos in RED with your own:

* {
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;
}

.pic-1 {
opacity: 1;
background: url(https://storage.ning.com/topology/rest/1.0/file/get/558412?profile=original) 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(https://api.ning.com/files/0gGC4ZQuxjP5x5SjFdkC3hRolHrtFW8ca1JPd6W5PQN8MuTMinV0RlXOUH8fss0*xpKRYjdbH-J6jfF3liUEu*aOEEcD-DjJ/287558876_8858230ce0_o.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(https://api.ning.com/files/0gGC4ZQuxjPNCyNfJkoM40OFMvObnYS46NlTDpXd*6vCwrKOLGjsNzFpiR4CKSSS-5NO7dji4qZLkjIpYhGJ272FgkzMk*3J/213517942_ab19f3d074_o.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(https://api.ning.com/files/0gGC4ZQuxjMQdb1437wd44kJna7VPuRuIwtx1JNMnxuMF42MsqLFmFP*VM3FabhexTpnC6lJIOQ*yecEZM2yQbuDq*niqOig/2929804557_4b59051e82_o.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* 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-transform: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-transform: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-transform: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-transform:scale(1);
}
}

And that's all folks!  No Javascript to weigh down your weekend.  Contact me if you need help with your Ning adventures.

[George H. Compton IV]

Sweet codes, I've always loved CSS animation. Thank you for sharing JF

[⚡JFarrow⌁]

My P G

[George H. Compton IV]

I did some playing around with this and made three different versions.

One for modules,
another one for fixed backgrounds and
one for the HTML boxes above and below the header and above the footer.

They can all be ran on the same page with different images.

~~~~~~~~~~~~~~~

JF There are a few errors in the CSS in this discussion.  There are four lines of code with the word transformm it should be  transform,  you have one too many    m 's ...   I'm sure it was a copy and paste error, I've done it myself. lol  :)

[⚡JFarrow⌁]

thanks for that heads up George.. yeah i think i have pretty much decided that from now on ill share these codes as attached notepad files so this doesn't occur..  Good eye G!  Time to transformmmm

[Randy L. Vollett]

Nice. I would prefer it in a module. Any chance for the code? Thanks :)

[Kos]

No Javascript to weigh down your weekend

Yay!  Thank you for sharing this

[⚡JFarrow⌁]

My pleasure kos!

[⚡JFarrow⌁]

Thank you JB

[⚡JFarrow⌁]

Thank you JB

[Fire-Tech]

Nice and clean.  Will def use this one somewhere. thanks for sharing brother ;)

[⚡JFarrow⌁]

Sweet FT...can't wait to see brother