In deze tutorial reeks zie je hoe een afbeelding 'reageert' op de bewegende muis erboven.
Ook worden er knoppen toegevoegd die de interactie stoppen of omzetten in een animatie met instelbare snelheid.
Hieronder zie je het beoogde resultaat.
Ga eerst op zoek naar een reeks van 30 afbeeldingen, die je hiervoor kunt gebruiken.
Ze zijn met een 3D programma te maken, of met Photoshop uit een animated gif te destilleren.
Allereerst wordt de HTML geschreven. Om de inhoud te centreren wordt een wrapper-div gemaakt met daarin de kop en de afbeeldingen.
Elke afbeelding krijgt een id, met oplopend nummer.
De 30 afbeeldingen zitter in een houder. Geef deze een relatieve positie.
Daarna kun je de afbeeldingen daarbinnen een absolute positie geven, waardoor ze over elkaar heen gaan liggen.
Om met jQuery 1 afbeelding van de 30 te laten zien, wordt er eerst jQuery gekoppeld.
Doordat het onder aan de DOM staat, wordt het volgende script pas uitgevoerd als de DOM en de jQuery geladen is.
In het script worden eerste alle afbeeldingen verborgen met display: none en vervolgens eentje via het nummer getoond door de css van deze afbeelding aan te passen naar display: block;
De handelingen uit de vorige video worden in een functie geplaatst. De functie krijgt als argument een nummer mee. Dat is het nummer van de afbeelding, die de functie moet laten zien.
De positie van de muis boven de afbeelding moet bepalen welke afbeelding te zien zal zijn.
We maken een functie met als input de event (e). Van deze event wordt de muispositie bepaald met e.pageX.
Dan meet je de positie ten opzichte van de linkerzijde van het venster.
Dus moet met van het element de offset().left worden afgehaald.
Omdat we een waarde tussen de 1 en de 30 willen, delen we de uitkomst door de breedte van het venster en vermenigvuldigen
dat met 30. Omdat het getal een heel getal moet worden, ronden we het naar boven af: Math.ceil().
Hebben we het nummer eenmaal berekend, dan kunnen we het in de functie van de vorige video stoppen.
De juiste afbeelding wordt dan getoond.
Als de muispositie precies 0 is, zal de Math.ceil() ook 0 opleveren en zal afbeelding met id bb0 getoond moeten worden. Deze is er niet.
Om dit op te lossen gebruiken we de Math.max(x,y) functie. Het maximum van nummer en het getal 1 zorgt ervoor dat het nummer getoond wordt als deze groter is dan 1. Zo niet dan wordt de waarde 1 doorgegeven.
Als we het nummer direct goed bepalen, kunnen we behalve de weergave van de afbeelding ook zorgen voor de weergave van het afbeeldingsnummer. Als je in de DOM een id maakt voor het nummer kan in het script het nummer daarin plaatsen. Natuurlijk moet er ook in het stijlblad voor een nette positie van het nummer gezorgd worden...
De animatie ontstaat door het vertonen van de verschillende afbeeldingen na elkaar.
Dit kan door het nummer te verhogen, de afbeelding met bijpassend nummer te tonen en dat steeds na elkaar.
Dit gebeurt hier met requestAnimationFrame(). Deze heeft als argument de functie waar hij zelf aangeroepen wordt.
De functie wordt dus uitgevoerd als de browser toe is aan een nieuwe update van het venster.
Na het laatste beeld moet het nummer weer verlaagd worden. Dit kan door de modulus-method.
In dit voorbeeld werken we met 30 beelden. Als het nummer dus 30 is, zal deze weer 0 worden.
Via Math.max() wordt die dan weer 1.
De methode is niet voor alle browsers gelijk, vandaar dat er een functie geschreven wordt,
die dit vertaald moet worden naar de methoden van de browsers.
De snelheid of beter gezegd de vertraging kan met een setTimeOut() worden ingesteld.
We maken daarvoor een variabele snelheid, die het aantal frames per seconde (1000 ms) bevat. De requestAnimationFrame() wordt daarmee uitgesteld.
De tijdsduur in de timeOut is dan 1000/snelheid want dan krijg je het aantal frames dat in 1000 ms seconde gewenst wordt.
Test in de verschillende browsers met verschillende waarden voor de snelheid.
Om de animatie te stoppen wordt een knop aangemaakt.
Er zijn ook twee globale variabelen nodig.
Een variabele wordt toegekend aan de requestAnimationFrame().
Dan is hij ook aan te spreken voor het stoppen van de animatie. Dan wordt hij gebruikt om er cancelAnimationFrame() aan te koppen.
Voordat dit gedaan wordt moet ook de setTimeOut() van de vertraging worden aangesproken.
Deze wordt daarom ook aan een variabele gekoppeld om vervolgens te worden uitgezet met clearTimeOut().
De applicatie kan ook minimalistischer: zonder stopknop. Het stoppen kan ook worden opgeroepen als d etuis over de afbeeldingen beweegt.
Je kunt een event $('#knop').on('click', '. . . ') vervangen door $('#element').on('mousemove', ' . . . ').
Ook de het opstarten van de animatie kan er direct achter: .on('mouseleave', speelAf);
Het stoppen lukt niet in Safari. Deze versie ondersteunt cancelAnimationFrame nog niet.
Net zoals bij requestAnimationFrame geven we de alternatieve aanroepen voor webkit, moz en ms mee.
De snelheid van de animatie moet instelbaar zijn.
Daarvoor wordt een slider geplaatst en in positie gebracht.
De waarde van de snelheid zit in een variabele en deze wordt aangepast, zodra de slider van waarde verandert.