Animations and slide shows in HTML


A brief introduction

If you need animations or slide shows running on the page, there is in principle several solutions. Animations and slide shows are basically the same, a series of pictures/slides, being shown in sequence, at a given speed. You can have a Flash animation or an animated gif, or you can do it directly in HTML using some CSS3 and JavaScript. Flash is being phased out due to security problems inherent in the system, so that is not recommendable. Gif animations have some advantages, e.g. that it is a single file, that just has to be uploaded and shown using the IMG tag, but on the other hand, it is harder to edit. Whether to use a gif animation or a slide show as shown here, is a matter of the task and person preferences.


The simple slide show

A simple slide show, where you just have slides being shown in a continuous cycle, consists of three parts:
What the slide show does, is to make all slides invisible as a start, by setting opacity to 0. After this, the slides are made visible by setting to 1.

The container for displaying slides
The slides have to be shown in a container, i.e. a tag for text and pictures. Here we use a DIV, but it might as well be something else like a P or TD. It has to be styled, using a class. The class we call SimpleSlider, and in the container we place four pictures from the subdirectory Graphics. It looks like this:

<DIV class="SimpleSlider">
<IMG SRC="Graphics/MrNoseyOriginal-Ink.jpg">
<IMG SRC="Graphics/MrNoseyOriginal-Color.jpg">
<IMG SRC="Graphics/MrNosey2007-Ink.jpg">
<IMG SRC="Graphics/MrNosey2007-Color.jpg">
</DIV>


The CSS class
The class being referred to, SimpleSlider, consists of three parts:

.SimpleSlider {
position:relative;
height:320px;
width:200px;
outline: 1px solid blue;
}

.SimpleSlider IMG {
position:absolute;
opacity:1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}

.SimpleSlider IMG.is-hidden {
opacity:0;
}

For this particular demo, the outline has been set to a solid, blue line, to show where the container for the slides is, and the transtion has been set to 1s, i.e. 1 second. Transition is the time for the gradual change between slides. These are of course adjusted according to need, like the size.

It is important to define height and width of the field in which the slides are running. Otherwise your slide show will be running on top of the following content on the page.


The JavaScript
The last thing missing, is the JavaScript to make the slide show work. It looks like this:

<SCRIPT>
var root = document.querySelector('.SimpleSlider');
var slides = root.querySelectorAll(':not(:first-child)');
for (i=0; i < slides.length; i++) {
slides[i].classList.add('is-hidden');
}
root.addEventListener('transitionend', function(){
root.insertBefore(root.querySelector(':first-child.is-hidden'), null);
});
setInterval(function(){
root.querySelector(':first-child').classList.add('is-hidden');
root.querySelector(':nth-child(2)').classList.remove('is-hidden');
}, 3000)
</SCRIPT>

The 3000 in the penultimate line of the script is how long the slide will be shown, in milliseconds, i.e. 3 seconds. This is adjusted according to need. Note, that the second used for transition is a part of the three seconds, so you end up with 1 second for the slide to appear and 2 seconds of full appearance, before changing to the next slide.

Be aware that the JavaScript has to be after the DIV with the slides, for the slide show to run properly.

The final result looks like this:




Now, if you also want slides with text or text and pictures combined, you can do this as well. The first thing you do is to insert DIVs with text and perhaps pictures, like you would in any other text. Like this:

<DIV class="SimpleSlider">
<DIV STYLE="background-color:white; font-weight:bold">Original version of Mr. Nosey by Roger Hargreaves</DIV>
<IMG SRC="Graphics/MrNoseyOriginal-Ink.jpg">
<IMG SRC="Graphics/MrNoseyOriginal-Color.jpg">
<DIV STYLE="background-color:white; font-weight:bold">2007 version of Mr. Nosey for cartoons</DIV>
<IMG SRC="Graphics/MrNosey2007-Ink.jpg">
<IMG SRC="Graphics/MrNosey2007-Color.jpg">
</DIV>


After this, the class has to be extended to handle DIV tags. Because IMG and DIV are treated the same, the easiest way to do it is like this:

.SimpleSlider {
position:relative;
height:320px;
width:200px;
outline: 1px solid blue;
}

.SimpleSlider IMG, .SimpleSlider DIV {
position:absolute;
opacity:1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}

.SimpleSlider IMG.is-hidden, .SimpleSlider DIV.is-hidden {
opacity:0;
}

Then the result is:

Original version of Mr. Nosey by Roger Hargreaves
2007 version of Mr. Nosey for cartoons


As it looks right now, it isn't pretty, from an aestetic point of view, but from here, it is only a matter of styling your elements in regards to size, background colors, etc. to make it look nice.


Slide shows that stops at mouseover

Often you would like the slide show to stop, when holding the mouse over the slide, so you can study the picture more closely. A solution for this, consists of three parts, like the smple slide show:
There is, however, a few differences to be aware of. E.g. there is both a container for defining the overall shape and an inner container for stacking the slides, so the start/stop function will work.

The container for showing the slides
Billederne skal vises i en beholder, dvs. en tag til tekst og billeder. Her bruger vi en DIV, men det kan sagtens være noget andet som f.eks. en P eller TD. Den skal styles med en klasse. Den kalder vi AdvancedSlider, og i den bruger vi de fire billeder fra subdirectoriet Graphic fra før. Det ser således ud:

<DIV CLASS="AdvancedSlider" ID="MainSlider">
<DIV CLASS="SlideContainer">
<DIV STYLE="background-color:white; font-weight:bold" CLASS="SingleSlide">Original version of Mr. Nosey by Roger Hargreaves</DIV>
<IMG SRC="Graphics/MrNoseyOriginal-Ink.jpg" CLASS="SingleSlide">
<IMG SRC="Graphics/MrNoseyOriginal-Color.jpg" CLASS="SingleSlide">
<DIV STYLE="background-color:white; font-weight:bold" CLASS="SingleSlide">2007 version of Mr. Nosey for cartoons</DIV>
<IMG SRC="Graphics/MrNosey2007-Ink.jpg" CLASS="SingleSlide">
<IMG SRC="Graphics/MrNosey2007-Color.jpg" CLASS="SingleSlide">
</DIV>


The CSS classes
This time we'll give the container a white background, a black frame and a little distance between frame and content, to make it look a bit more presentable. Because we are stopping the slide show when the mouse is over the slid, it is a nice touch to have the cursor change, så the reader can see that something is happening in this area. Even ig you write it under or next to the frame, it is a good idea, as there's always someone not noticing the message.

The classes being used are:

.AdvancedSlider {
height:350px;
width:300px;
float:none;
background-color:#FFFFFF;
border-style:solid;
border-width:1px;
border-color:#000000;
padding:10px;
}

.AdvancedSlider:hover {
cursor:grabbing;
}

.SlideContainer {
position: relative;
}

.SingleSlide {
float: left;
position: absolute;
opacity: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-ms-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}

.SlideContainer > .SingleSlide:first-child {
opacity: 1;
}


The JavaScript
The script that makes it all work:

(function() {

function Slideshow( element ) {
this.lmnt = document.querySelector( element );
this.init();
}

Slideshow.prototype = {
init: function() {
this.wrapper = this.lmnt.querySelector( ".SlideContainer" );
this.AdvancedSlides = this.lmnt.querySelectorAll( ".SingleSlide" );
this.previous = this.lmnt.querySelector( ".slider-previous" );
this.next = this.lmnt.querySelector( ".slider-next" );
this.index = 0;
this.total = this.AdvancedSlides.length;
this.timer = null;
this.action();
this.stopStart();
},
_slideTo: function( slide ) {
var currentSlide = this.AdvancedSlides[slide];
currentSlide.style.opacity = 1;

for( var i = 0; i < this.AdvancedSlides.length; i++ ) {
var SingleSlide = this.AdvancedSlides[i];
if( SingleSlide !== currentSlide ) {
SingleSlide.style.opacity = 0;
}
}
},
action: function() {
var self = this;
self.timer = setInterval(function() {
self.index++;
if( self.index == self.AdvancedSlides.length ) {
self.index = 0;
}
self._slideTo( self.index );

}, 2500); <!--Slide interval in ms-->
},
stopStart: function() {
var self = this;
self.lmnt.addEventListener( "mouseover", function() {
clearInterval( self.timer );
self.timer = null;
}, false);
self.lmnt.addEventListener( "mouseout", function() {
self.action();
}, false);
}
};

document.addEventListener( "DOMContentLoaded", function() {
var slider = new Slideshow( "#MainSlider" );
});

})();


For this solution, the JavaScript is placed before the container with slides. The result looks like this:


Original version of Mr. Nosey by Roger Hargreaves
2007 version of Mr. Nosey for cartoons
Hold the cursor over the slide, to stop the slide show.