Article original : How to Build Beautiful Page Transitions in Angular

Par Arjav Dave

Dans le monde d'aujourd'hui, avoir un simple site web ne suffit plus. Le site doit avoir une interface utilisateur (UI) propre et être intuitif. Et surtout, il doit comporter un élément interactif.

L'interactivité permet de retenir les utilisateurs sur votre site plus longtemps. Par conséquent, cela augmente les chances que les utilisateurs deviennent des clients. De plus, un temps d'interaction plus long entraîne un taux de rebond plus faible et un meilleur classement dans les moteurs de recherche.

L'une des formes d'interaction les plus courantes et les plus basiques se produit lorsqu'un utilisateur fait défiler (scroll) votre site web. Mais ne serait-ce pas assez ennuyeux si l'utilisateur continuait à faire défiler votre longue page statique ?

Dans ce tutoriel, nous allons examiner trois animations de base que vous pouvez implémenter au défilement. Les animations de parallaxe (parallax), de fondu (fade) et de glissement (slide) sont les animations les plus populaires utilisées par les développeurs pour rendre le défilement plus amusant. Voyons comment nous pouvons les construire pour nos sites.

Avant d'aller plus loin, voici les résultats finaux :

Parallaxe ([Voir la démo](https://animations-demo-ffcb4.web.app/parallax\" class=\"cd il\" rel=\"noopener\" style=\"box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;))

Fondu ([Voir la démo](https://animations-demo-ffcb4.web.app/fade\" class=\"cd il\" rel=\"noopener\" style=\"box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;))

Glissement ([Voir la démo](https://animations-demo-ffcb4.web.app/slide\" class=\"cd il\" rel=\"noopener\" style=\"box-sizing: inherit; color: inherit; text-decoration: underline; -webkit-tap-highlight-color: transparent;))

Configuration du projet

Prérequis

Nous utiliserons Angular 11 pour créer notre projet. Et nous utiliserons VS Code comme IDE.

Pour construire les animations, nous allons utiliser la fabuleuse Green Sock Animation Platform (gsap). C'est l'une des meilleures bibliothèques d'animation JavaScript du marché.

Créer le projet

Créez un projet Angular en saisissant la commande ci-dessous. Assurez-vous d'activer le routage lorsqu'on vous le demande.

ng new animations --style css
code animations

Cela créera un nouveau projet nommé animations avec le format de style CSS. Ensuite, il ouvrira le projet dans VS Code.

Maintenant, installons gsap. Dans votre terminal VS Code, entrez la commande ci-dessous :

npm install --save gsap @types/gsap

Cela installera la bibliothèque gsap et les fichiers de typage via @types/gsap.

Enfin, créons trois composants. Entrez les commandes ci-dessous :

ng g c parallax
ng g c fade
ng g c slide

Comment configurer les routes

Créons trois routes distinctes : /parallax, /fade, et /scroll. Ouvrez votre app-routing.module.ts et ajoutez les routes comme ci-dessous :

Comment créer une animation de parallaxe

Puisque nous avons maintenant configuré le projet, commençons par l'animation de parallaxe.

Lorsque vous créez des animations de page, vous utilisez généralement des sections. Alors, ouvrez votre fichier parallax.component.html et collez le code ci-dessous :

Ajoutons un peu de style à ces sections. Comme nous allons utiliser des sections dans les trois composants, nous ajouterons le style au fichier commun styles.css.

Ouvrez votre fichier styles.css et collez le CSS ci-dessous :

Dans le code ci-dessus, nous rendons la hauteur et la largeur de la section égales à la hauteur et à la largeur de la fenêtre d'affichage (viewport). Deuxièmement, nous alignons le contenu au centre de la section. Enfin, nous définissons le style de police pour l'affichage du texte.

Comme la classe bg utilisée dans parallax.component.html est spécifique à la parallaxe, nous définirons ses propriétés dans parallax.component.css. Ouvrez ce fichier et collez le CSS ci-dessous :

Pour configurer l'animation de parallaxe, nous devons ajouter du code TypeScript. Ouvrez donc votre fichier parallax.component.ts et ajoutez le code ci-dessous dans votre fonction ngOnInit :

J'ai ajouté des commentaires en ligne pour vous aider à comprendre le code. Envoyez-moi un message si vous avez besoin d'explications supplémentaires.

Enfin, ajoutez les imports ci-dessous en haut de votre fichier TS afin de ne pas avoir d'erreurs au moment de la compilation :

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/all';

C'est tout ! Vous pouvez maintenant visiter http://localhost:4200/parallax pour voir la magnifique animation.

Comment créer une animation de fondu

Pour l'animation de fondu, ouvrez le fichier fade.component.html et collez le code HTML ci-dessous :

Dans le fade.component.css, collez le CSS ci-dessous :

Nous n'allons afficher qu'une seule section à la fois. Nous allons donc masquer toutes les sections sauf la première. De plus, comme nous ne déplaçons pas les sections avec le défilement, nous marquerons leur position comme fixe.

Ajoutons le code d'animation pour rendre les autres sections visibles au défilement. Ouvrez le fichier fade.component.ts et collez le code suivant :

J'ai ajouté des commentaires en ligne afin de rendre le code explicite. Pour toute précision, n'hésitez pas à me le faire savoir.

Visitez http://localhost:4200/fade pour voir l'animation de fondu fluide pendant que vous défilez.

Comment créer une animation de glissement

C'est généralement la plus facile à comprendre et à mettre en œuvre.

Ouvrez votre fichier slide.component.html et collez le code ci-dessous. C'est similaire à fade.component.html, sauf que la classe est supprimée de la première section.

Nous n'avons pas besoin d'ajouter de CSS.

Ensuite, ouvrez le fichier slide.component.ts et ajoutez le code ci-dessous :

Encore une fois, j'ai ajouté les commentaires en ligne pour une meilleure compréhension du code. Pour toute question, contactez-moi.

Ouvrez http://localhost:4200/slide pour voir une animation de glissement fascinante pendant que vous défilez.

Conclusion

Les animations ajoutent beaucoup de valeur à votre site et aident à maintenir l'engagement de vos utilisateurs. Comme pour toute chose, n'en abusez pas et utilisez les animations avec modération. N'encombrez pas et ne gâchez pas le site web avec des images lourdes et des animations farfelues. Keep It Simple & Keep It Subtle (KIS & KIS).

Dans ce tutoriel, nous avons vu comment ajouter des animations simples de parallaxe, de fondu et de glissement pour les sections de page.

Enfin, un grand merci à Lorem Picsum pour avoir fourni de si belles photos.

Si vous avez aimé cet article, vous aimerez peut-être aussi les articles ci-dessous :

• Modules de chargement différé (Lazy Loading) dans Angular
• .NET 5 : Comment authentifier et autoriser correctement les API
• Apprendre le TDD avec des tests d'intégration dans .NET 5.0

Note : Vous pouvez trouver l'intégralité du projet sur GitHub.