CSS Slideshow Tutorial

The screen resolution used in this tutorial is width 1366px x height 768px so your images, which will used as the page background, must be resized to these dimensions. The background can be a canvas of images described here, such as family photos, but the canvas must be 1366 x 768 pixels. For screen resolutions other than 1366 x 768, use backgrounds of that size and adjust this tutorial accordingly. Your document will be best viewed in full screen mode.

For full screen mode, press F11 for PCs and alt + = for Chromebook on the Key Board
The Esc button may be used to return to normal screen mode

What we are going to do is to have each background, called from storage, fade in on top of the current background. This will be accomplished by varying the opacity of the called background from being transparent until it is fully opaque using simple Css coding. This will give the illusion of one background transitioning into another. The images below are thumbnails of the backgrounds that will used in the example. This tutorial is written for three backgrounds but you can have as many as you want. Just adjust the Ids, move functions and opacity delay parameters accordingly.

Now we must store our assembled backgrounds and assign an ID (identification by # sign) and a stacking order to them so they will display in the proper order.

#bg1{position:absolute;left:0px;top:-768px;z-index:2;}
#bg2{position:absolute;left:0px;top:-768px;z-index:3;}
#bg3{position:absolute;left:0px;top:-768px;z-index:4;} 		Background Ids are assigned and are stored on the left side of the screen 768 pixels above the screen top stacking order is assigned by z-index values

Now we must find a simple way of moving the backgrounds into view so that the opacity of the background can start changing from transparent to opaque. This will be accomplished using a javascript code unique to each background Id. Each move moves the background, specified by its Id, from a top location of -768px to a top location of 0px in one step of 768 pixels. The time between moves, in seconds, is specified in the timeout section;

function move1(){
var step=768;
var y=document.getElementById('bg1').offsetTop;
if(y <0 )
{y= y +step;
document.getElementById('bg1').style.top= y + "px";
setTimeout('move1()',10);}
else { setTimeout("move2()",20000);}
} 		function move2(){
var step=768;
var y=document.getElementById('bg2').offsetTop;
if(y <0 )
{y= y +step;
document.getElementById('bg2').style.top= y + "px";
setTimeout('move2()',10);}
else { setTimeout("move3()",20000);}
}		 function move3(){
var step=768;
var y=document.getElementById('bg3').offsetTop;
if(y <0 )
{y= y +step;
document.getElementById('bg3').style.top= y + "px";
setTimeout('move3()',10);}
}

Next we must start the opacity transitions now that the backgrounds have been assembled and their locations determined. It must be emphasized that TIME is critical when assigning the number of seconds to the opacity coding. As noted above, 20 seconds, has been set as the interval between backgrounds. Also you will probably want to write an introduction to your presentation so 20 seconds has been arbitrarily assigned for this and must be taken into consideration. This delay will be handled in the body tag by delaying the javascript move1 function.

 <body onload="setTimeout('move1()',20000);"> 

It must be noted that the animation delay time is calculated from the time the page is opened. Therefore, since the intro page lasts 20 seconds, the first animation MUST be delayed 20 seconds. The subsequent delay times are cumulative and based on an animation-duration of 20 seconds.

.delay-bg1{
animation-name: wait;
animation-delay: 20s;
animation-duration: 20s;
animation-iteration-count: 1;
}
@keyframes wait{0%{opacity:0}100%{opacity:1}} 		.delay-bg2 {
animation-name: wait;
animation-delay: 40s;
animation-duration: 20s;
animation-iteration-count: 1;
}
@keyframes wait{0%{opacity:0}100%{opacity:1}} 		.delay-bg3 {
animation-name: wait;
animation-delay: 60s;
animation-duration: 20s;
animation-iteration-count: 1;
}
@keyframes wait{0%{opacity:0}100%{opacity:1}}

Now lets write the div tags in the body of our document now that a class has been assigned to each background.

<div Id=bg1 class="delay-bg1">
<img src="bg1.jpg" width=1368 height=768 alt=background-1>
</div> 		<div Id=bg2 class="delay-bg2">
<img src="bg2.jpg" width=1368 height=768 alt=background-2>
</div> 		<div Id=bg3 class="delay-bg3">
<img src="bg3.jpg" width=1368 height=768 alt=background-3>
</div>

Well that about sums it up. Below is a sumation of all the code shown above and placed on this web page to demonstrate it. This page is based on the music Strangers In The Night which also the Theme music for the page.

homeValid CSS! HTML Hit Counter