HTML-Hajen

Animationer og slide shows i HTML









En kort intro

Hvis man skal have animationer eller slide shows der kører på siden, er der principielt flere løsninger. Animationer og slide shows er grundliggende det samme, en række billeder/slides, der vises sekventelt, med en eller anden given hastighed. Man kan have en Flash animation eller en animeret gif, eller man kan lave det direkte i HTML vha. noget CSS3 og JavaScript. Flash er ved at blive afviklet pga. de sikkerhedsproblemer der ligger i det system, så det kan ikke anbefales. Gif-animationer har sine fordele, f.eks. at det er en enkelt fil der blot skal uploades og vises med IMG-tag'en, men til gengæld er den svære at editere. Om man skal lave en gif-animation eller et slide show som det viste her, er en afvejning i forhold til opgaven og præferencer.


Det simple slide show

Et simpelt slide show, hvor det bare er slides der står og kører i ring, består af tre dele:
Det som slide show'et gør, er at alle slides som udgangspunkt er usynlige ved at sætte opacity til 0. Herefter gøres slides'ene synlige ved at sætte opacity til 1.

Beholderen til visning af slides
Slides'ene 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. Klassen kalder vi SimpleSlider, og i beholderen lægger vi fire billeder fra subdirectoriet Graphics. Det ser således ud:

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


CSS Klassen
Den klasse der refereres til, SimpleSlider, består af tre dele:

.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;
}

Lige til denne demo er outline sat til at være fuldt optrukket i blå, for at vise hvor beholderen til slides'ene er, og transition er sat til 1s, dvs. 1 sekund. Transition er tiden for den glidende overgang mellem slides'ene. Det retter man selvfølgelig til efter behov, ligesom størrelsen.

Det er vigtigt, at man her får defineret en højde og bredde på feltet som slidsene kører i. Ellers ligger ens slide show oven i det efterfølgende indhold på siden.


JavaScriptet
Det sidste der mangler er JavaScriptet til at få slide show'et til at køre. Det ser således ud:

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

De 3000 i næstsidste linje af scriptet er hvor længe slidet skal vises, i millisekunder, dvs. 3 sekunder. Det retter man i sagens natur også efter behov. Bemærk, at det sekund der er i transition er med i de tre sekunder, så man ender med 1 sekund til at komme frem og 2 sekunder helt fremme, inden der skiftes til næste slide.

Vær opmærksom på, at JavaScriptet skal være efter DIV'en med slides'ene, for at slide show'et afvikles korrekt.

Det samlede resultat ser nu således ud:




Hvis man nu også vil have slides med tekst eller tekst og billeder kombineret, kan man også det. Det første man gør er at indsætte DIV'er med tekst og evt. billede, som man ville gøre i en hvilkensomhelst tekst. Sådan her:

<DIV class="SimpleSlider">
<DIV STYLE="background-color:white; font-weight:bold">Originalversion af Mr. Nosey af 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 af Mr. Nosey til tegnefilm</DIV>
<IMG SRC="Graphics/MrNosey2007-Ink.jpg">
<IMG SRC="Graphics/MrNosey2007-Color.jpg">
</DIV>


Herefter skal klassen udvides til også at håndterer DIV-tags. Fordi IMG og DIV skal behandles ens, er det letteste at gøre det således:

.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;
}

Resultatet bliver så:

Originalversion af Mr. Nosey af Roger Hargreaves
2007-version af Mr. Nosey til tegnefilm


Som det ser ud lige nu, er det ikke så æstetisk kønt, men herfra er det kun et spørgsmål om at få stylet sine elementer med størrelse, baggrundsfarver, osv. for at få det til at se præsentabelt ud.


Slide shows der stopper, ved mouseover

Ofte vil man gerne have, at slide show'et stopper, når man holder musen over, så man kan se nærmere på billedet. En løsning der kan dette, består af tre dele, ligesom det simple slide show:
Der er dog et par forskelle, som man skal være opmærksom på. Der er f.eks. både en beholder til at holde formen og en indre beholder til at stable slides'ene i, for at start/stop-funktionen fungerer som den skal.

Beholderen til visning af 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="AdvancedSlide">Originalversion af Mr. Nosey af Roger Hargreaves</DIV>
<IMG SRC="Graphics/MrNoseyOriginal-Ink.jpg" CLASS="AdvancedSlide">
<IMG SRC="Graphics/MrNoseyOriginal-Color.jpg" CLASS="AdvancedSlide">
<DIV STYLE="background-color:white; font-weight:bold" CLASS="AdvancedSlide">2007-version af Mr. Nosey til tegnefilm</DIV>
<IMG SRC="Graphics/MrNosey2007-Ink.jpg" CLASS="AdvancedSlide">
<IMG SRC="Graphics/MrNosey2007-Color.jpg" CLASS="AdvancedSlide">
</DIV>
</DIV>


CSS Klasserne
Denne gang prøver vi at give beholderen en hvid baggrund, en sort ramme og lidt afstand fra ramme til indhold, for at få det til at se lidt mere præsentabelt ud. Fordi vi stopper slide show'et når musen holdes over, er det rart, at cursoren skifter form, så læseren kan se, at der skere noget i dette område. Selv hvis man skriver det under eller ved siden af rammen, er det en god idé, for der er altid nogen der overser beskeden.

De klasser der anvendes er:

.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;
}


JavaScriptet
Scriptet der får det hele til at fungere:

(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" );
});

})();


Til denne løsning, ligger JavaScriptet før beholderen med slides. Resultatet ser således ud:


Originalversion af Mr. Nosey af Roger Hargreaves
2007-version af Mr. Nosey til tegnefilm
Hold cursoren over slidet for at stoppe slide show'et.