We hebben (vanaf 10-08-2021) in het Starter Template een eigen library voor animaties zitten.
Deze functionaliteit is standaard niet ingeschakeld, daarvoor kan je de volgende stappen zetten:
- open /dev/scripts.js en zoek de “jQuery(function() {});”-tag;
- uncomment daar de functie “animation()”;
- open /inc/static.php en zoek daar “wp_enqueue_style( ’themanaam-animations’);”
- uncomment deze functie om de stylesheet in te laden;
Vervolgens kan je de animaties toepassen op HTML-elementen. Je moet hiervoor:
- de class-naam “animate” toevoegen;
- een “animate-type” als attribuut toevoegen;
- met “animate-delay” (in ms.) kan je vertraging op de animatie toepassen (optioneel);
- standaard: 100ms.
- met “animate-repeat” (true / false) kan je bepalen of een animatie opnieuw moet afspelen als het element uit beeld is geweest
- standaard: true.
De beschikbare animaties zijn:
- fade
- fade-top
- fade-right
- fade-bottom
- fade-left
- flip
- flip-horizontal
- flip-vertical
- slide
- slide-top
- slide-right
- slide-bottom
- slide-left
- zoom-in
- zoom-in-top
- zoom-in-right
- zoom-in-bottom
- zoom-in-left
- zoom-out
- zoom-out-top
- zoom-out-right
- zoom-out-bottom
- zoom-out-left