Animations au défilement : ajouter un mouvement subtil aux pages de votre boutique

Dernière mise à jour : juin 2026, les conseils et le code IntersectionObserver / reduced-motion ci-dessous s’appliquent à PrestaShop 8 et 9 (Hummingbird et Classic). Les notes d’accessibilité tiennent compte de l’Acte européen sur l’accessibilité, désormais en vigueur.

Les animations au défilement, ces éléments qui apparaissent en fondu, remontent légèrement ou zooment en place lorsque la page les dépasse, occupent une position délicate pour un propriétaire de boutique. Sur une page d’accueil ou une page de marque, elles donnent une impression de soin et de dynamisme ; sur une grille de produits ou dans le tunnel de commande, elles ajoutent une demi-seconde de « où est passé mon bouton ? » qui peut coûter des commandes. La vraie compétence n’est pas de savoir comment les ajouter. C’est de savoir où, dans une boutique PrestaShop, elles justifient leur présence, où elles grignotent discrètement les conversions, et comment les intégrer sans plomber votre score PageSpeed. Ce guide porte précisément sur cet arbitrage dans une boutique PrestaShop, les templates concernés, les zones du back-office et le budget performance à respecter.

Si votre véritable objectif est de faire survivre du code front-end personnalisé aux mises à jour du thème, c’est un autre sujet, tout aussi important, nous le traitons séparément dans CSS et JavaScript personnalisés dans PrestaShop sans casser les mises à jour. Ici, nous partons du principe que vous avez décidé d’ajouter du mouvement et que vous voulez le faire correctement.

Où les animations au défilement ont leur place, et où elles vous coûtent des commandes

PrestaShop est une plateforme transactionnelle, pas un site portfolio. La règle honnête : animez les pages où le visiteur explore ou doit être convaincu, jamais celles où il achète ou compare. Appliqué aux contrôleurs et templates que vous allez réellement modifier, cela donne :

Qu’est-ce que cela signifie concrètement pour vous ? La tentation consiste à activer une bibliothèque qui « fait tout apparaître en fondu » sur tout le thème et à l’admirer sur votre ordinateur. Le rôle du marchand est exactement l’inverse : limiter les animations à la page d’accueil et aux templates CMS, et exclure explicitement les templates où les clients choisissent et paient. Une grille de catégories qui hésite avant d’afficher les produits n’a pas l’air premium, elle semble cassée sur une connexion lente.

Le test de réalité sur mobile

Plus de la moitié du trafic de la plupart des boutiques PrestaShop vient du téléphone, et c’est précisément là que les animations au défilement se dégradent. Ce qui paraît parfaitement fluide sur un MacBook devient saccadé sur un Android de trois ans. Testez sur un vrai appareil de milieu de gamme, pas seulement sur votre machine de développement, et considérez le mobile comme une raison d’en faire moins, pas comme un terrain de démonstration. Les thèmes responsives de PrestaShop réorganisent déjà beaucoup les éléments sur petits écrans ; ajouter une couche d’animation par-dessus cette réorganisation, c’est souvent là que naissent les défilements heurtés.

Les types d’animation adaptés à une boutique e-commerce

• Apparition en fondu. Opacité 0 → 1. L’effet le plus sûr, adapté à tout bloc de contenu. Si vous ne devez en choisir qu’un, choisissez celui-ci.
• Glissement vers le haut. L’élément remonte de 20 à 30 px tout en apparaissant en fondu. Une légère impression de profondeur ; efficace pour des avis clients ou des cartes de fonctionnalités sur la page d’accueil.
• Révélation en cascade. Chaque élément d’une ligne s’anime un court instant après le précédent, créant un effet de cascade. Réservez-la à un bloc d’accueil sélectionné avec soin, une rangée de produits mis en avant choisie à la main, jamais à la grille de catégories, où elle ne fait que ralentir la lecture.
• Parallaxe. L’arrière-plan se déplace à une vitesse différente du premier plan. L’effet peut être marquant sur une seule bannière principale ou une section d’histoire de marque, mais il coûte cher en performance et provoque souvent des saccades sur mobile. Une section par page au maximum, et testez-la sur téléphone avant de la mettre en ligne.

Les règles de design qui gardent l’effet subtil

La différence entre « premium » et « agaçant » tient entièrement aux réglages, pas à la technique :

• Subtilité. Si un visiteur remarque consciemment l’animation, c’est qu’elle est trop présente. Les éléments doivent donner l’impression d’apparaître naturellement, pas de faire un numéro.
• Vitesse. 200 à 400 ms est la bonne plage. Plus rapide, l’effet paraît nerveux ; plus lent, il paraît poussif. Ne dépassez jamais 600 ms. Personne ne doit attendre que votre page ait fini de bouger pour pouvoir la lire.
• Une seule fois. Animez un élément la première fois qu’il entre dans la fenêtre, puis laissez-le tranquille. Le réanimer à chaque remontée de page est le moyen le plus courant de transformer un bel effet en rendu bon marché.
• Respect des préférences de mouvement. Certains visiteurs activent prefers-reduced-motion au niveau du système d’exploitation, souvent en raison de troubles vestibulaires. Respectez ce choix, et notez que les règles européennes d’accessibilité attendent de votre boutique qu’elle reste pleinement utilisable pour ces personnes.

Performance et accessibilité : les points non négociables

C’est là que la plupart des tentatives d’animations au défilement faites maison font plus de mal que de bien à une boutique PrestaShop. Deux réalités techniques déterminent si votre animation est gratuite ou coûteuse :

N’animez que opacity et transform. Ces deux propriétés sont gérées par le compositeur du navigateur, elles ne forcent pas la page à recalculer sa mise en page, ce qui laisse le thread principal disponible pour le reste. Animer width, height, top, left, margin ou padding déclenche un recalcul de mise en page à chaque image, et sur une page de catégorie PrestaShop riche en contenu, c’est exactement le type de coût qui se traduit par des saccades.

Utilisez l’Intersection Observer, jamais des écouteurs d’événements de défilement. Un window.addEventListener('scroll', ...) naïf se déclenche des dizaines de fois par seconde et entre en concurrence avec les scripts front-end de PrestaShop (le panier, l’ajax de recherche à facettes, le carrousel). L’Intersection Observer ne se déclenche que lorsqu’un élément entre réellement dans la zone visible, ce qui est à la fois plus juste et plus léger.

Côté accessibilité, le minimum est clair : ne cachez jamais un contenu essentiel derrière une animation qui dépend de JavaScript, si un script échoue, le contenu (et surtout le prix et le bouton d’achat) doit toujours être présent. N’animez pas du texte pendant qu’un lecteur d’écran peut être en train de le lire, et évitez tout clignotement ou mouvement rapide. L’Acte européen sur l’accessibilité considère les animations qui bloquent ou gênent l’accès au contenu comme un problème de conformité, pas comme un simple choix esthétique.

Les deux règles CSS qui font l’essentiel du travail

Une apparition en fondu correcte et légère repose surtout sur le CSS. Le JavaScript ne fait qu’ajouter une classe lorsque l’élément entre dans la zone visible. Le modèle ci-dessous n’anime que opacity et transform, et inclut la protection prefers-reduced-motion qui vous garde du bon côté de l’accessibilité. C’est du CSS vanilla, sans bibliothèque :

/* hidden state: paint it, but offset and transparent */
.mpr-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .35s ease, transform .35s ease;
}

/* JS adds .is-visible when the element scrolls into view */
.mpr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* respect the visitor's OS-level motion preference */
@media (prefers-reduced-motion: reduce) {
  .mpr-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

Et voici l’observateur qui active la classe une seule fois, puis cesse de surveiller l’élément. Notez l’appel à unobserve, qui permet de respecter la règle « une seule animation » sans laisser d’écouteurs actifs :

const io = new IntersectionObserver((entries, obs) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      obs.unobserve(entry.target);
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.mpr-reveal').forEach((el) => io.observe(el));

Livrez ce JS comme fichier externe enregistré via le hook d’assets de votre module, pas comme un <script> inline dans un template, pour les raisons expliquées dans le guide CSS/JS personnalisé cité plus haut. Limitez la classe .mpr-reveal à la page d’accueil et aux templates CMS uniquement, exactement comme indiqué dans le tableau.

Trois façons d’ajouter des animations au défilement dans PrestaShop

La première approche mérite un avertissement qui piège beaucoup de marchands : si vous modifiez des fichiers de thème pour ajouter le script et le CSS, faites-le dans un thème enfant, sinon la prochaine mise à jour du thème peut tout effacer en silence. Nous expliquons précisément pourquoi et comment dans les thèmes enfants dans PrestaShop : pourquoi vous ne devez jamais modifier le thème parent. Et évitez les poids lourds, des frameworks complets comme GSAP ou Anime.js ajoutent 30 à 60 Ko de JavaScript pour des capacités qu’une boutique n’utilisera jamais ; un simple fondu avec glissement ne justifie pas ce poids sur un site dont le tunnel de commande doit rester rapide.

Une micro-interaction liée mérite d’être cadrée au même moment, puisqu’elle appartient à la même famille de travail avec Intersection Observer : un bouton retour en haut qui apparaît en fondu lorsque le visiteur dépasse la ligne de flottaison. C’est l’un des rares mouvements déclenchés au défilement qui soit bienvenu sur toutes les pages, parce qu’il réduit la friction au lieu d’en ajouter.

Où s’insère le module Scroll Animations

Les réglages des animations au défilement affichent un interrupteur d’activation, un menu déroulant de type d’animation, des champs de délai et de durée, et un champ de sélecteurs CSS.

L’approche par module s’adresse au propriétaire de boutique qui veut une page d’accueil soignée, sans forker un thème ni écrire à la main du code Intersection Observer susceptible de casser à la prochaine mise à jour. Notre module Scroll Animations ajoute depuis le back-office des effets configurables de fondu, de glissement et de zoom à n’importe quel élément, avec un IntersectionObserver natif et aucune dépendance externe, donc sans charger un framework de 30 Ko sur vos pages. Qu’est-ce que cela vous apporte concrètement ? Vous contrôlez la durée, le point de déclenchement et l’effet de chaque élément depuis l’administration, au lieu de passer par une facture développeur ; la logique d’animation vit dans le module, pas dans votre thème, donc une mise à jour du thème ne peut pas l’effacer ; et comme elle s’appuie sur opacity et transform au niveau du compositeur, elle est conçue pour préserver votre score PageSpeed plutôt que de le consommer.

Quelle que soit l’approche choisie, la discipline reste la même, et c’est précisément ce que les guides à faire soi-même oublient souvent : limitez le mouvement aux pages qui convainquent, gardez-le hors des pages qui vendent et des pages qui encaissent, n’animez que l’opacité et les transformations, et testez sur un vrai téléphone avant de considérer le travail terminé. Une animation au défilement doit donner au visiteur l’impression que la page est vivante, jamais l’obliger à attendre qu’elle se stabilise avant d’acheter.

Questions fréquentes

Où peut-on utiliser des animations au défilement sans risque dans une boutique PrestaShop ?

Animez les pages où le visiteur explore ou doit être convaincu, la page d’accueil, avec parcimonie, et les pages CMS comme À propos ou un lookbook. Gardez le mouvement hors des listes de catégories, des pages produit et du tunnel de commande, là où les clients parcourent, décident et paient. Une grille de catégories qui hésite avant d’afficher les produits paraît cassée, pas premium, et tout délai au paiement met directement la commande en danger.

Pourquoi tout le monde insiste-t-il sur IntersectionObserver plutôt que sur un écouteur de défilement ?

Un écouteur d’événement scroll se déclenche des dizaines de fois par seconde et entre en concurrence avec les scripts front-end de PrestaShop, le panier, l’ajax de recherche à facettes, le carrousel. IntersectionObserver ne se déclenche que lorsqu’un élément entre réellement dans la zone visible, il est donc à la fois plus juste et plus léger. Il rend aussi la règle « animer une seule fois » triviale : appelez unobserve sur l’élément après sa révélation, et le navigateur cesse complètement de le surveiller.

Quelles propriétés CSS peut-on animer sans risque ?

Uniquement opacity et transform. Toutes deux sont gérées par le compositeur du navigateur et ne forcent pas de recalcul de mise en page, ce qui laisse le thread principal libre. Animer width, height, top, left, margin ou padding déclenche un reflow à chaque image, et sur une page de catégorie riche en contenu, c’est exactement le coût qui se voit sous forme de saccades.

Dois-je prendre en charge prefers-reduced-motion ?

Oui, et ce n’est qu’une media query, montrée dans l’extrait ci-dessus. Certains visiteurs définissent prefers-reduced-motion: reduce au niveau du système d’exploitation, souvent en raison de troubles vestibulaires. Le respecter n’est pas seulement une question de courtoisie : l’Acte européen sur l’accessibilité considère les animations qui gênent l’accès au contenu comme un problème de conformité. Dans cette media query, placez l’élément dans son état visible sans transition afin qu’il apparaisse immédiatement.

Une bibliothèque comme AOS ou GSAP est-elle une bonne idée ?

AOS est un raccourci raisonnable si vous êtes à l’aise avec l’ajout d’attributs data-aos aux éléments dans un thème enfant. Évitez les poids lourds, GSAP et Anime.js ajoutent 30 à 60 Ko de JavaScript pour des capacités qu’une boutique n’utilisera jamais, et un simple fondu avec glissement ne justifie pas ce poids sur un site dont le tunnel de commande doit rester fluide. Le modèle vanilla IntersectionObserver ci-dessus tient en quelques lignes et n’ajoute aucun coût de framework.

Les animations au défilement vont-elles nuire à mon score PageSpeed ?

Pas nécessairement. Bien mises en œuvre, en animant uniquement opacity et transform, avec IntersectionObserver, en limitant l’effet à quelques templates et en évitant les frameworks lourds. Leur coût est négligeable. Elles commencent à faire mal lorsque vous activez une bibliothèque qui « fait tout apparaître en fondu » sur tout le thème, animez des propriétés qui déclenchent la mise en page ou chargez un framework d’animation de 30 Ko pour un simple fondu. Cadrez strictement et testez sur un vrai téléphone de milieu de gamme.

Pourquoi mon animation est-elle saccadée sur téléphone mais fluide sur mon ordinateur portable ?

Parce que plus de la moitié de votre trafic est mobile, et c’est là que l’animation se dégrade. Un Android de trois ans a beaucoup moins de marge que votre machine de développement, et les thèmes responsives de PrestaShop réorganisent déjà fortement la mise en page sur petits écrans, ajouter une couche d’animation par-dessus cette réorganisation provoque les saccades. Considérez le mobile comme une raison d’en faire moins : moins d’éléments animés, pas de parallaxe, et une vérification systématique sur un vrai appareil de milieu de gamme.

Guides associés

• Bouton retour en haut : un petit détail UX qui compte étonnamment
• CSS et JavaScript personnalisés dans PrestaShop sans casser les mises à jour
• Thèmes enfants dans PrestaShop : pourquoi vous ne devez jamais modifier le thème parent