Animationer og slide shows i HTML

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.

Et simpelt slide show, hvor det bare er slides der står og kører i ring, består af tre dele:

• En beholder, dvs. en tag, til tekst og billeder, f.eks. en DIV, som slides'ene kan køre i
• En klasse til udseendet af slides'ene
• Et JavaScript til at få det hele til at fungere

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:



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


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:


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:



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:


Resultatet bliver så:



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.

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:

• En tag til tekst og billeder, f.eks. en DIV, som slides'ene kan køre i
• En række klasser til udseendet af slides og beholder til slides
• Et JavaScript til at få det hele til at fungere

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:



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:



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



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