Easing

Sinds de acceptatie van HTML5 en CSS3 zijn er verschillende mogelijkheden om elementen op je pagina te animeren. De meeste mogeijkheden zijn er tot nu toe met het gebruik van een jQuery-library. In deze training werken we daarom met jQuery UI..
Werk in deze training een reclame slogan uit met een animatie. Er bewegen minimaal 4 elementen en er wordt gebruik gemaakt van easng. Easing bepaalt de manier waarop de beweging opstart en eindigt. Is er bevoorbeeld een uitdemping, of een stuiter op het eind?

We willen animeren met verschillende vormen van leasing: de manier waarop de beweging begint of stopt kan worden gevarieerd. We maken 4 elementen, die na elkaar binnenkomen.
Om ze voor de css en voor het script te kunnen selecteren, krijgt ieder een eigen id.
Elk element in een eigen section en het geheel in een wrapper, die gecentreerd wordt.
Alle elementen krijgen een position relative.
De teksten worden van een passend font en afmeting voorzien.

Zowel jQuery als jQuery UI. als een eigen script worden gekoppeld.
Met het script worden de elementen buiten beeld geplaatst. Gebruik hiervoor de methode .css(). We schuiven ze naar links en omdat de wrapper overflow: hidden heeft, komen de elementen buiten het zicht.

Met .animate() kunnen we de elementen weer terugbrengen naar de beginpositie. Met .delay() kunnen we de animatie uitstellen.
$('#hetElement').delay(tijdsduur).animate({eigenschap: 'waarde'}, tijdsduur,"easingstype");
De mogleijkheden voor de easing met jQuery UI vind je hier.

Zet deze training online en stuur mij een linkje.