Snelle tip scrolanimaties met fullPage.js en Animate.css

In een vorige zelfstudie heb ik je voorgesteld aan fullPage.js, een populaire jQuery-plug-in voor het maken van pagina's op volledig scherm. In deze snelle tip laat ik je zien hoe je scroll-gebaseerde animaties maakt met fullPage.js en animate.css.

Vereiste bibliotheken

Voor de doeleinden van dit voorbeeld heb ik een demopagina opgesteld. Als je kijkt onder de instellingen tab, ziet u dat ik de volgende bibliotheken aan de pen heb toegevoegd:

• fullPage.js
• animate.css
• jQuery
• bootstrap

Het Bootstrap-raamwerk is niet essentieel; Ik heb het alleen toegevoegd omdat ik wilde profiteren van zijn stijlen.

Het proces

Onze pagina bestaat uit vier secties; elk die de pagina vult (dankzij fullPage). Gebruikers gaan naar het volgende gedeelte door te scrollen of te navigeren via de paginakoppelingen aan de rechterkant. Elke keer dat dat gebeurt, activeren we een aantal animaties, bijvoorbeeld om de afbeeldingen in positie te brengen.

Voordat we de code tonen waarmee de animaties worden afgevuurd, laten we eerst de vereiste stappen uitvoeren:

• We moeten profiteren van de "callback" -functies die fullPage biedt. Meer in het bijzonder willen we in ons geval het tweede, derde en vierde gedeelte animeren, dus gebruiken we het met verlof Bel terug. Als we het eerste gedeelte wilden animeren, hadden we het kunnen gebruiken afterload Bel terug. Op dezelfde manier moeten we voor het animeren van de dia's de afterSlideLoad en onSlideLeave functies.
• We voegen dynamisch CSS-animaties toe die door het animate.css bibliotheek met jQuery.
• We zullen elementen ook sequentieel animeren met behulp van de animeren-delay CSS-eigenschap.

Laten we nu een duik nemen in de animaties!

Animatie # 1

Het tweede deel van de pagina bevat drie afbeeldingen en één knop. Hier is de structuur:

 
             Een eenvoudige knop      
 

Merk op dat we de hebben toegevoegd is-geanimeerd en is-animated__single lessen naar de elementen die we willen animeren. Houd er ook rekening mee dat de elementen met de is-geanimeerd klasse zal hetzelfde animatie-effect delen (bijv. fadeInUpBig).

De jQuery-code die de animaties voor deze sectie activeert ziet er als volgt uit:

 var $ isAnimatedSecond = $ ('. second .is-animated'), $ isAnimatedSecondSingle = $ ('. second .is-animated__single'); / * deze code is onderdeel van de onLeave callback * / if (index == 1 && nextIndex == 2) $ isAnimatedSecond.addClass ('animated fadeInUpBig'); $ isAnimatedSecond.eq (0) .css ('animation-delay', '.3s'); $ isAnimatedSecond.eq (1) .css ('animation-delay', '.6s'); $ isAnimatedSecond.eq (2) .css ('animation-delay', '.9s'); $ isAnimatedSecondSingle.addClass ('geanimeerde rollIn'). css ('animation-delay', '1.7s');  

In dit voorbeeld, wanneer we de eerste sectie verlaten en naar de tweede gaan, passen we twee verschillende animaties toe (d.w.z.. fadeInUpBig en Rollin) naar de doelelementen. Daarnaast gebruiken we de animatie-delay CSS-eigenschap om op te geven wanneer die animaties moeten starten.

Animatie # 2

Het derde deel bevat twee afbeeldingen en één knop. Hieronder ziet u de bijbehorende HTML-code:

 
          Een eenvoudige knop      
 

Net als bij het vorige voorbeeld hebben we het is-geanimeerd en is-animated__single klassen naar de gewenste elementen.

De jQuery-code ziet er als volgt uit:

 var $ isAnimatedThird = $ ('. third .is-animated'), $ isAnimatedThirdSingle = $ ('. third .is-animated__single'); / * deze code is onderdeel van de onLeave callback * / if ((index == 1 || index == 2) && nextIndex == 3) $ isAnimatedThird.eq (0) .addClass ('animated fadeInRightBig'). css ('animation-delay', '.3s'); $ isAnimatedThird.eq (1) .addClass ('geanimeerde fadeInLeftBig'). css ('animation-delay', '.6s'); $ isAnimatedThirdSingle.addClass ('geanimeerde bounceInDown'). css ('animation-delay', '1.2s');  

In deze sectie gebruiken we de fadeInRightBig en fadeInLeftBig animaties om de afbeeldingen sequentieel weer te geven. Verder laten we de knop zien met behulp van de bounceInDown animatie.

Animatie # 3

Het vierde gedeelte bestaat uit drie elementen: twee alinea's en één knop. Bekijk hieronder hoe het is gestructureerd:

 
    
Een beetje tekst hier
   
Een beetje tekst hier
   Dank je!      
 

Merk nogmaals op dat we doelelementen het hebben gegeven is-geanimeerd en is-animated__single klassen.

Bekijk vervolgens de bijbehorende jQuery-code:

 var $ isAnimatedFourth = $ ('. fourth .is-animated'), $ isAnimatedFourthSingle = $ ('. fourth .is-animated__single'); / * deze code is onderdeel van de onLeave callback * / if ((index == 1 || index == 2 || index == 3) && nextIndex == 4) $ isAnimatedFourth.addClass ('geanimeerde zoomIn'). css ('animation-delay', '.6s'); $ isAnimatedFourthSingle.addClass ('geanimeerde lightSpeedIn'). css ('animation-delay', '1.2s') $ isAnimatedFourthSingle.one ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () $ (this) .removeClass ('lightSpeedIn ') .addClass (' zoomOutDown '););  

Hier verschijnen beide alinea's tegelijkertijd met de in zoomen animatie. Integendeel, de knop verschijnt met de lightSpeedIn animatie.

Bovendien helpt de volgende code ons te detecteren wanneer een animatie eindigt:

 $ ('# yourElement'). one ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); 

In ons voorbeeld laten we de knop slechts een paar seconden zien en dan maken we gebruik van de bovengenoemde code om deze te verbergen.

Hieronder ziet u de ingesloten Codepen-demo (hoewel de demo van de volledige pagina veel effectiever is):

Conclusie

In deze snelle tip hebben we geleerd hoe we de bibliotheken fullpage.js en animate.css kunnen combineren om op scrollen gebaseerde animaties te bouwen.

Als je deze demo wilt verbeteren, zijn hier twee dingen die je misschien wilt proberen:

• Schakel de animaties alleen in op grote schermen. Gebruik hiervoor de matchMedia methode.
• Maak de code binnen de met verlof functie meer herbruikbaar.