Astuce faites défiler les animations avec fullPage.js et Animate.css

Dans un précédent tutoriel, je vous ai présenté fullPage.js, un plugin populaire pour jQuery permettant de créer des pages en plein écran. Dans cette astuce, je vais vous montrer comment créer des animations avec défilement avec fullPage.js et animate.css..

Bibliothèques requises

Pour les besoins de cet exemple, j'ai créé une page de démonstration. Si vous regardez sous le Réglages Dans l'onglet, vous verrez que j'ai inclus les bibliothèques suivantes dans le stylo:

• fullPage.js
• animate.css
• jQuery
• Bootstrap

Le framework Bootstrap n'est pas vital; Je l'ai ajouté uniquement parce que je voulais profiter de ses styles.

Le processus

Notre page comprend quatre sections; chacun remplissant la page (grâce à fullPage). Les utilisateurs passeront à la section suivante en faisant défiler ou en naviguant via les liens de pagination à droite. Chaque fois que cela se produit, certaines animations sont déclenchées, comme par exemple la mise en position des images..

Avant d'afficher le code qui déclenche les animations, couvrons d'abord les étapes requises:

• Nous devons tirer parti des fonctions de «rappel» fournies par fullPage. Plus précisément, dans notre cas, nous voulons animer les deuxième, troisième et quatrième sections, nous allons donc utiliser le en congé rappeler. Si nous voulions animer la première section, nous aurions pu utiliser le afterLoad rappeler. De même, pour animer les diapositives, nous devrions utiliser le afterSlideLoad et onSlideLeave les fonctions.
• Nous allons ajouter dynamiquement des animations CSS fournies par le animate.css bibliothèque utilisant jQuery.
• Nous animerons également des éléments de manière séquentielle à l'aide du animate-delay Propriété CSS.

Maintenant, plongons dans les animations!

Animation n ° 1

La deuxième section de la page comprend trois images et un bouton. Voici sa structure:

 
             Un simple bouton      
 

Notez que nous avons ajouté le est animé et is-animated__single classes aux éléments que nous voulons animer. De plus, gardez à l’esprit que les éléments avec le est animé la classe partagera le même effet d’animation (par exemple,. fadeInUpBig).

Le code jQuery qui déclenche les animations pour cette section se présente comme suit:

 var $ isAnimatedSecond = $ ('.second .is-animated'), $ isAnimatedSecondSingle = $ ('.second .is-animated__single'); / * ce code fait partie du rappel onLeave * / 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 ('rollated animée'). css ('animation-delay', '1.7s');  

Dans cet exemple, lorsque nous quittons la première section et passons à la seconde, nous appliquons deux animations différentes (i.e. fadeInUpBig et rollin) aux éléments cibles. De plus, nous utilisons le délai d'animation Propriété CSS pour spécifier quand ces animations doivent commencer.

Animation n ° 2

La troisième section contient deux images et un bouton. Ci-dessous, vous pouvez voir le code HTML correspondant:

 
          Un simple bouton      
 

Comme dans l'exemple précédent, nous avons ajouté le est animé et is-animated__single classes aux éléments désirés.

Le code jQuery ressemble à ceci:

 var $ isAnimatedThird = $ ('. tiers. est-animé'), $ isAnimatedThirdSingle = $ ('. tiers. est-animé_single'); / * ce code fait partie du rappel onLeave * / if ((index == 1 || index == 2) && nextIndex == 3) $ isAnimatedThird.eq (0) .addClass ('animation fadeInRightBig'). css ('animation-delay', '.3s'); $ isAnimatedThird.eq (1) .addClass ('animation fadeInLeftBig'). css ('animation-delay', '.6s'); $ isAnimatedThirdSingle.addClass ('animated bounceInDown'). css ('animation-delay', '1.2s');  

Dans cette section, nous utilisons le fadeInRightBig et fadeInLeftBig animations pour montrer les images de manière séquentielle. De plus, nous montrons le bouton en utilisant le bouton BounceInDown animation.

Animation n ° 3

La quatrième section comprend trois éléments: deux paragraphes et un bouton. Voyez comment cela est structuré ci-dessous:

 
    
Du texte ici
   
Du texte ici
   Je vous remercie!      
 

Encore une fois, notez que nous avons donné aux éléments cibles la est animé et is-animated__single Des classes.

Ensuite, regardez le code jQuery associé:

 var $ isAnimatedFourth = $ ('. quatrième. est animée'), $ estAnimatedFourthSingle = $ ('. quatrième .is-animée__)'; / * ce code fait partie du rappel onLeave * / if ((index == 1 || index == 2 || index == 3) && nextIndex == 4) $ isAnimatedFourth.addClass ('zoom animé'). css ('animation-delay', '.6s'); $ isAnimatedFourthSingle.addClass ('animated lightSpeedIn'). css ('animation-delay', '1.2s') $ isAnimatedFourthSingle.one ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', fonction () $ (this). ') .addClass (' zoomOutDown '););  

Ici, les deux paragraphes apparaissent en même temps en utilisant le agrandir animation. Au contraire, le bouton apparaît en utilisant le bouton lightSpeedIn animation.

De plus, le code suivant nous aide à détecter la fin d’une animation:

 $ ('# votreElément'). one ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd ouanimationend animationend', doQuelque chose); 

Dans notre exemple, nous ne montrons le bouton que pendant quelques secondes, puis nous profitons du code susmentionné pour le masquer..

Ci-dessous, vous pouvez voir la démo intégrée de Codepen (bien que la démo de la page complète soit beaucoup plus efficace):

Conclusion

Dans cette astuce, nous avons appris à combiner les bibliothèques fullpage.js et animate.css pour créer des animations à base de défilement..

Si vous souhaitez améliorer cette démo, voici deux choses que vous voudrez peut-être essayer:

• Activer les animations uniquement sur les grands écrans. Pour ce faire, utilisez le matchMedia méthode.
• Faire le code dans le en congé fonction plus réutilisable.