Animation de fondu d'éléménts en VueJS

Les meilleurs sites web sont ceux qui réagissent aux interactions de l'utilisateur. En d'autres termes, plus vos sites web se comporteront en fonction des actions des internautes sur vos pages, et plus ils seront appréciés. Une excellente façon d'intégrer ce genre d'interactions est d'animer certains éléments au scroll de vos utilisateurs.

Outre les effets classiques de parallaxe et autres événements de défilement, une bonne façon d'ajouter une touche de réactivité est de faire en sorte que les éléments de vos pages apparaissent et s'effacent au fur et à mesure que la vue défile.

Nous allons nous pencher dans ce court billet technique sur la manière d'implémenter cette réaction dans VueJS 3 en utilisant des scroll events et des transitions CSS classiques.

Le grand avantage de cette méthode est que nous n'avons besoin d'aucune librairie externe à Vue, ce qui allège le processus améliorant donc les performances de notre site.

Si vous voulez voir un exemple de ce que nous allons construire, vous pouvez visiter la page notre expertise de notre site !

Prêts ? Alors allons-y pour le code, mais avant, quelques précisions : nous utilisons Vue Property Decorator, qui dépend de VueClassComponent dans nos projets, si ce n'est pas votre cas pas de panique, il vous faudra simplement adapter quelques éléments de syntaxe pour que tout fonctionne correctement chez vous.

Styliser nos éléments de fondu enchaîné

La toute première chose que nous devons faire, c'est de construire un template et de styliser nos éléments. Pour cet exemple, nous allons utiliser des blocs basiques, pour pouvoir se concentrer pleinement sur le comportement de nos éléments.

Donc, à l'intérieur de notre template, nous avons seulement besoin de trois types d'éléments :

• Un container
• Quelques éléments en largeur max
• Quelques éléments plus petits pour varier

Notre template pour ce TP :

<template>
  <div class='container'>
      <div class='fade-in full-width'></div>
      <div class='fade-in full-width'></div>
      <div class='half-width fade-in'></div>
      <div class='half-width fade-in'></div>
  </div>
</template>

Ensuite au niveau de l'apparence nous avons juste besoin de créer un container basique et d'appliquer quelques lignes de CSS pour changer la couleur, la largeur et l'espacement de nos blocs.

<style scoped>  
    .container {  
        width: 80%;  
	min-width: 450px;  
        margin: 0 auto;  
    }  
	  
    .fade-in {  
	background-color: #2ecc71;  
	height: 500px;  
	margin-bottom: 50px;  
	opacity: 0;  
	transition: 0.3s all ease-out;  
	transform: scale(0.8);  
	box-sizing: border-box;  
	padding: 20px;  
	display: inline-block; 
    }
  
    .full-width {  
	width: 100%;  
    }  
	  
    .half-width {  
	width: 47.5%;  
    }  
	  
    .half-width:nth-of-type(2n + 1) {  
	margin-right: 2.5%;  
    }  
	  
    .half-width:nth-of-type(2n) {  
	margin-left: 2.5%;  
     }  
</style>

Une chose importante à noter est que tous nos éléments qui vont apparaître au scroll commencent avec une opacité par défaut de 0. Cette opacité sera modifiée par notre script. Nous allons également modifier l'échelle de notre élément.

Pour une animation plus agréable, un effet de transition est appliqué à nos éléments. Lors du changement d'opacité et de taille, une transition douce s'effectuera, ce qui attire l’œil de l'utilisateur sans le brusquer.

Lors de l'arrivée sur la page rien n'apparaît, mais le scroll sera possible car les éléments sont présents, ils sont juste rendus invisibles (car transparents).

L'étape finale est de les rendre visible en utilisant un peu de Javascript.

Faire apparaître nos éléments

Pour ce tutoriel, nous allons utiliser les cycles de vie de VueJS, en particulier les cycles mounted() pour récupérer les éléments de notre DOM après qu'ils soient crées et destroyed() pour nettoyer nos listeners.

<script>
import Vue from 'vue'
export default class YourClass extends Vue {
    fadeInElements = []

    mounted() { }
		
    destroyed() { }

}
</script>

Ensuite, il faut que nous récupérions les éléments du DOM sur lesquels nous souhaitons activer la transition. Pour ce faire nous créons un tableau de tous nos éléments. Nous pouvons le faire en utilisant document.getElementsByClassName - cependant, cela renvoie une HTMLCollection, or, nous voulons un tableau pour pouvoir utiliser certaines méthodes spécifiques de Javascript. Nous pouvons changer le type de ce retour grâce à la méthode Array.from() de Javascript.

mounted() {

    this.fadeInElements = Array.from(document.getElementsByClassName('fade-in'))

}

Maintenant que nous avons un tableau de tous les éléments que nous voulons faire apparaître, nous avons quelques étapes à suivre :

• Les parcourir à chaque fois que la vue défilera (au scroll)
• Déterminer si un élément est supposé être visible
• Si c'est le cas, déclencher notre animation et le supprimer de notre tableau

Pour pouvoir parcourir notre tableau au scroll, il nous faut créer un scroll listener une fois notre composant crée, et le retirer lors de sa destruction, pour éviter les pertes de performances.

L'étape suivante est de créer une méthode handleScroll() qui sera appelée lors de la création de la vue (pour charger les blocs qui devraient être visibles sans scroll) et qui sera ensuite appelée à chaque fois que notre scroll listener sera déclenché.

mounted() {
    this.fadeInElements = Array.from(document.getElementsByClassName('fade-in'))
    document.addEventListener('scroll', this.handleScroll)
}

destroyed() {
    document.removeEventListener('scroll', this.handleScroll)
}

A l'intérieur de notre méthode liée au scroll, nous devons ajouter une boucle qui parcours le tableau d'éléments crée précédemment.

handleScroll() {
    for (let i = 0; i < this.fadeInElements.length; i++) {
        const elem = this.fadeInElements[i]
    }
}

À ce stade, nous avons besoin d'une façon de déterminer si un élément est visible ou non. Pour ce faire, nous allons utiliser le rectangle de délimitation d'un élément, qui renvoie la taille et la position d'un élément par rapport à la fenêtre.

Nous allons également ajouter un petit buffer, pour qu'au moins 200 pixels de l'élément soient visibles avant qu'il ne s'affiche. Cela améliorera l'effet car en délayant l'animation, nous nous garantissons que les visiteurs du site verront l'animation correctement. Sans ce tampon, notre transition se déclencherait lorsque le premier pixel de notre élément apparaîtrait à l'écran, or une majorité de celui-ci sera encore hors de la fenêtre et donc invisible pour l'utilisateur, ce qui serait dommage.

isElemVisible(el) {
    const rect = el.getBoundingClientRect()
    const elemTop = rect.top + 200 // buffer
    const elemBottom = rect.bottom
    return elemTop < window.innerHeight && elemBottom >= 0
}

Maintenant que notre méthode de vérification de la position de nos éléments par rapport à la fenêtre est finie, il ne nous reste plus qu'à l'intégrer dans la boucle de notre méthode de gestion du défilement.

for (let i = 0; i < this.fadeInElements.length; i++) {
    const elem = this.fadeInElements[i]
    if (this.isElemVisible(elem)) {
        elem.style.opacity = '1'
        elem.style.transform = 'scale(1)'
        this.fadeInElements.splice(i, 1) // Pour jouer l'animation seulement une fois
    }
}

Et voilà ! Si nous retournons à notre application pour vérifier, les éléments devraient apparaître au scroll de l'utilisateur, exactement comme nous le voulions.

Pour aller plus loin

Nous avons finalement réussi à créer l'effet de fondu ! Et pour votre plus grand bonheur il existe de nombreuses façons d'améliorer cette animation pour qu'elle s'adapte à vos besoins, par exemple :

• Faire disparaître les éléments lorsqu'ils sortent de l'écran de l'utilisateur
• Utiliser des animation CSS plus poussées plutôt que de simples transitions
• Transformer le fonctionnement de nos animations en directives personnalisées

Maintenant que vous maîtrisez le fonctionnement du scroll listener et les animations ou les transitions CSS, la limite c'est votre imagination !

Si vous avez des questions sur le sujet, n'hésitez pas à nous contacter. Nous sommes aussi curieux de savoir ce que vous avez fait avec ce tutoriel.

Ce tutoriel est inspiré du travail de Matt Maribojoc dans un de ses articles Medium.