Ajouter des animations déclenchées par le défilement
Senior SEO-specialist
Les animations déclenchées par le défilement rendent votre site web plus dynamique sans alourdir les temps de chargement. Elles attirent l’attention, améliorent l’expérience et font ressortir les éléments importants au bon moment. Dans cet article, j’explique comment bien mettre en œuvre cette technique : légère, réactive et à l’épreuve du référencement.
1. Quand les animations de défilement ont un sens
Utilisez les animations de défilement pour mettre subtilement en évidence des éléments spécifiques, comme par exemple :
- USP ou statistiques
- Blocs CTA
- Témoignages
- Graphiques ou étapes du processus
- Éléments du portefeuille
Remarque : utilisez les animations de manière fonctionnelle. N’en faites pas trop, mais soutenez votre message.
2. Quelle technique choisissez-vous ?
Il existe plusieurs façons de créer des animations de défilement. Le choix dépend de la taille de votre projet et de la technologie utilisée.
Options populaires :
- AOS.js – Léger, facile à intégrer
- ScrollTrigger (GSAP ) – Plus de contrôle, mais plus lourd
- Intersection Observer API – JavaScript natif, aucune bibliothèque externe n’est nécessaire
Pour les sites qui favorisent le référencement, je préfère généralement AOS.js ou Intersection Observer.
3. Animations de défilement avec AOS.js (installation rapide)
AOS (Animate On Scroll) est rapide à ajouter et fonctionne bien sans connaissance de JavaScript.
Étape 1 : Ajouter l’AM
html
<!-- Head -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<!-- Footer -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script>
AOS.init();
</script>
Étape 2 : Ajoutez data-aos à vos éléments HTML
html
<div data-aos="fade-up">Inhoud die infade bij scrollen</div>
<div data-aos="zoom-in" data-aos-delay="200">Met vertraging</div>
Vous pouvez varier les paramètres suivants : fondu, diapositive, zoom, retournement, durée, délai, etc.
Aan de slag met SEO? Neem gerust contact op.
4. Animations de défilement avec Intersection Observer (JS natif)
Pour ceux qui préfèrent travailler sans scripts externes, l’API Intersection Observer est une solution légère et flexible.
Exemple :
html
<div class="fade-in">Tekst of afbeelding</div>
<style>
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>
Avantage : pas de dépendances, contrôle total du comportement et du style.
5. Meilleures pratiques (pour le référencement, l’interface utilisateur et la performance)
- N’utilisez les animations que si elles sont fonctionnelles
- Ajouter la prise en chargedes mouvements réduits pour l’accessibilité
- Charger JS et CSS de manière asynchrone et différée lorsque c’est possible
- Évitez d’animer de grandes images ou des blocs DOM lourds
- Test sur mobile et faible CPU (Lighthouse / DevTools)
En conclusion
Les animations déclenchées par le défilement rendent votre site visuellement plus fort – à condition qu’elles soient correctement déployées. Utilisez-les pour guider l’attention, soutenir l’interaction et structurer le contenu. Avec des outils comme AOS.js ou le JavaScript natif, vous pouvez les mettre en œuvre rapidement et efficacement.
