Introduction

Chaque fois que l’utilisateur fait défiler une page Web, un effet d’élément déclenché en haut, en bas, en gauche et en droite, cette fonction rend le site Web assez interactif et accrochent le point de vue de l’utilisateur. Dans ce blog, nous discuterons de la mise en œuvre de l’effet d’animation sur les pages Web, c’est un excellent moyen d’engager les utilisateurs et de les garder sur du contenu intéressé sur les pages Web.

L’animation peut s’appliquer à n’importe quel élément sur les pages Web telles que l’image, le texte et le CTA, l’animation peut être déclenchée lorsque l’utilisateur fait défiler la page, créant une transition fluide et transparente.

Pourquoi l’utiliser?

La bibliothèque WOW JS est une bibliothèque JavaScript et une open source qui vous permet d’animer des éléments à mesure qu’ils entrent dans la fenêtre. Il est léger et facile à utiliser, ce qui en fait un choix populaire pour ajouter des animations aux pages Web.

Il est utilisé pour créer des animations sur Scroll, ce qui peut aider à améliorer l’expérience utilisateur en rendant la page plus attrayante et interactive. Il peut être utilisé pour animer du texte, des images et d’autres éléments de la page, ce qui les rend plus attrayants visuellement.

Quand utiliser?

1. Lorsque vous souhaitez attirer l’attention d’un utilisateur sur un élément spécifique de la page
2. Lorsque vous souhaitez développer un look plus poli, raffiné, convivial, intuitif, visuellement attrayant, interactif, moderne et professionnel pour votre site Web.
3. Lorsque vous souhaitez améliorer l’esthétique globale de votre site Web.
4. Lorsque vous souhaitez vous engager plus dans l’expérience utilisateur.
5. Lorsque vous souhaitez créer un site Web mémorable, impactant, spécifique à l’utilisateur, de visualisation de contenu et d’engagement des utilisateurs.

Les étapes suivantes doivent être suivies pour atteindre cette fonctionnalité dans Drupal

1. Gardez le dernier fichier wow.min.js (https://cdnjs.com/libraries/wow) dans les thèmes / personnalisé / thème / js / js / bibliothèque Emplacement
2. Gardez le dernier wow.min.css (https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css) Fichier dans les thèmes / personnalisé / thème / nom de la bibliothèque / library
3. Inclure wow.min.js et wow.min.css dans le fichier de thème.libraries.yml

 
global-styling:
 version: 2.3
 css:
   theme:
     css/library/wow.min.css: {}
 js:
   js/library/wow.min.js: {}

4. Effacer le cache à l’aide de la commande DRUSH ou de l’administrateur Drupal
5. Maintenant, il est prêt à ajouter des classes d’animation dans des éléments et à faire une expérience utilisateur interactive (UI).
6. Vous pouvez facilement copier et coller la classe d’animation à partir d’ici
7. Exemple:

animate.css

Dans l’exemple ci-dessus, Zoom en vigueur sera apparu, par défaut, sa durée d’animation est 1, mais nous pouvons le gérer en conséquence.

Conclusion

Pour implémenter une animation à l’aide de la bibliothèque WOW JS dans Drupal, il est très facile à utiliser, ajouter des cours d’animation et créer un site Web avec des utilisateurs engageants, interactifs, conviviaux, intuitifs, esthétiques, un look professionnel impactant et mémorable. Il aidera à améliorer l’interface utilisateur globale sur le site Web de Drupal.

Référence: Cliquez ici

J’espère que vous trouverez cela utile. Veuillez commenter si vous avez des préoccupations.

Vous avez trouvé cela utile? PARTAGEZ-LE