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.
Replies
Nice work J, thanks for sharing :-)
Nice work JF. Anyway of having the pics just fade in and out without the zoom?
Hello Randy you can remove the zoom by changing this line of code. Everywhere you see it. " transform:scale(1.1); " Change the 1.1 to a 1 that should remove the zoom.