Aperçu des animations au scroll

Prévisualisez en ligne et gratuitement le comportement des animations CSS déclenchées par le scroll avec notre outil d'aperçu. Choisissez parmi 12 préréglages dont fade-in, slide-up, scale, flip, rotate, blur et bounce. Ajustez le timing, l'easing, le stagger et le seuil avec un aperçu en direct, puis copiez le code CSS et JavaScript prêt à l'emploi. Sans inscription.

Scroll Animation Preview

Preview CSS scroll-triggered animation behaviors with adjustable settings. Choose a preset, tune timing and easing, then scroll the preview panel to see the animation in action. Copy the ready-to-use CSS and JavaScript snippet.

Animation Preset

Duration (ms)

600ms

Delay (ms)

0ms

Easing Function

Trigger Threshold

15% of element visible

Animate only once (unobserve after trigger)Stagger children

Stagger Delay (ms)

100ms between each

Live Preview

Scroll inside the box to trigger

↓ Scroll down to see animations

🚀

Fast Performance

Optimised for speed and efficiency

🔒

Secure by Default

Privacy-first, no data leaves your device

🎨

Beautiful Design

Clean, modern UI that users love

📱

Fully Responsive

Works perfectly on any screen size

⚡

Zero Config

Works out of the box, no setup needed

🌍

Global CDN

Lightning-fast delivery worldwide

Generated CSS + JavaScript

@keyframes scroll-anim {
  from { opacity: 0; }
  to { opacity: 1; }
}

.scroll-reveal {
  opacity: 0;
  animation: scroll-anim 600ms ease-out 0ms both;
  animation-play-state: paused;
}

.scroll-reveal.is-visible {
  animation-play-state: running;
}

/* Stagger children */
.scroll-reveal:nth-child(1) { animation-delay: 0ms; }
.scroll-reveal:nth-child(2) { animation-delay: 100ms; }
.scroll-reveal:nth-child(3) { animation-delay: 200ms; }
.scroll-reveal:nth-child(4) { animation-delay: 300ms; }

/* JavaScript (Intersection Observer) */
/*
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.15 }
);
document.querySelectorAll('.scroll-reveal').forEach((el) => observer.observe(el));
*/

Pourquoi utiliser notre aperçu des animations au scroll ?

Aperçu instantané des animations au scroll : prévisualisez 12 préréglages d'animations CSS au scroll en temps réel avec notre outil. Ajustez la durée, le délai, l'easing, la distance et le seuil avec des curseurs et voyez l'animation se mettre à jour instantanément dans le panneau d'aperçu en direct.
Aperçu en ligne sécurisé des animations au scroll : l'outil fonctionne entièrement dans votre navigateur. Aucune configuration d'animation, aucun code CSS ni donnée d'utilisation n'est jamais envoyé à un serveur. Votre travail de design reste totalement privé sur votre appareil.
Aperçu des animations au scroll - sans installation : utilisez l'outil directement dans n'importe quel navigateur moderne, sans téléchargement, plugin ni outil de build. Prévisualisez les animations au scroll depuis n'importe quel appareil et copiez le snippet CSS et JavaScript prêt pour la production.
100 % gratuit avec 12 préréglages : l'outil est entièrement gratuit, sans inscription, sans limite d'utilisation et sans publicité. Choisissez parmi 12 préréglages dont fade, slide, scale, flip, rotate, blur, bounce et zoom - chacun avec un contrôle complet du timing et du stagger.

Cas d'usage courants de l'aperçu des animations au scroll

Animations d'entrée de landing page : utilisez l'outil pour prototyper des animations fade-in et slide-up pour les sections d'une landing page. Ajustez le seuil et le délai de stagger pour créer une séquence d'apparition soignée au fil du défilement.
Animations de cartes et grilles de fonctionnalités : prévisualisez des animations décalées scale-in ou slide-up pour des grilles de cartes de fonctionnalités. Le contrôle de stagger vous permet de régler le délai exact entre les cartes pour créer un effet d'apparition en cascade.
Sections d'articles de blog et d'articles : les pages riches en contenu profitent d'animations fade-in discrètes qui attirent l'attention sur chaque section à son entrée dans la fenêtre. Utilisez l'outil pour trouver la durée et le seuil adaptés à un contenu lisible.
Pages de portfolio et de vitrine : les sites de portfolio utilisent des animations au scroll spectaculaires comme flip-in, rotate-in et zoom-fade pour marquer les esprits. Prévisualisez ces effets dans l'outil avant de choisir une direction de design.
Listes de produits e-commerce : les grilles de produits utilisent des animations décalées scale-in pour rendre la navigation dynamique et engageante. L'outil vous permet d'accorder le délai de stagger et l'easing à la personnalité de votre marque.
Tableaux de bord et visualisation de données : les graphiques et cartes de données profitent d'animations discrètes blur-in ou fade-in qui signalent la fin du chargement. Utilisez l'outil pour trouver des animations informatives plutôt que distrayantes.

Qu'est-ce qu'une animation au scroll ?

Une animation au scroll est une animation CSS qui se déclenche lorsqu'un élément entre dans la fenêtre d'affichage du navigateur au fil du défilement. Contrairement aux animations au survol, les animations au scroll nécessitent JavaScript pour détecter quand les éléments deviennent visibles. L'approche standard utilise l'API Intersection Observer - une API native du navigateur qui surveille efficacement les éléments et déclenche un callback lorsqu'ils franchissent un seuil de visibilité. Notre outil d'aperçu combine des animations CSS @keyframes avec un Intersection Observer pour simuler exactement le comportement de vos animations au scroll en production. Le code généré utilise animation-play-state: paused par défaut et passe à running lorsque l'élément devient visible - un modèle qui fonctionne de manière fiable sur tous les navigateurs modernes.

Comment fonctionne notre aperçu des animations au scroll

Choisissez un préréglage et ajustez les réglages : sélectionnez l'un des 12 préréglages d'animation (fade, slide, scale, flip, rotate, blur, bounce, zoom) dans la liste déroulante. Utilisez les curseurs pour ajuster la durée (100-2000 ms), le délai, la fonction d'easing, la distance de translation et le seuil de l'Intersection Observer (la proportion de l'élément qui doit être visible avant le déclenchement).
Faites défiler le panneau d'aperçu : le panneau d'aperçu en direct contient 6 cartes de démonstration. Faites défiler vers le bas dans le panneau pour déclencher les animations. L'outil utilise un véritable Intersection Observer sur le conteneur d'aperçu, donc le comportement correspond exactement à la production. Cliquez sur Rejouer l'animation pour réinitialiser et relancer depuis le haut.
Copiez le code généré : le panneau de sortie affiche la règle @keyframes complète, les définitions de classes CSS et un snippet JavaScript d'Intersection Observer. Copiez le tout en un clic et collez-le directement dans votre projet.

Ce que génère l'aperçu des animations au scroll

Règle @keyframes : l'animation keyframe complète du préréglage sélectionné, utilisant les propriétés opacity, transform et filter qui sont composées par le GPU pour des performances fluides.
Classes CSS : une classe de base .scroll-reveal (masquée, animation en pause) et une classe modificatrice .is-visible (animation en cours). Appliquez .scroll-reveal à tout élément que vous souhaitez animer au scroll.
Délais de stagger : lorsque le stagger est activé, la sortie inclut des sélecteurs nth-child avec des valeurs animation-delay incrémentales pour les 4 premiers enfants - prêts à l'emploi dans les grilles de cartes et les listes de fonctionnalités.
Snippet JavaScript : une implémentation complète d'Intersection Observer qui ajoute .is-visible lorsque les éléments entrent dans la fenêtre d'affichage, avec le seuil configuré et le comportement optionnel d'unobserve après déclenchement.

Bonnes pratiques de performance pour les animations au scroll

Pour de meilleures performances d'animation au scroll, n'animez que les propriétés opacity et transform - elles sont gérées par le compositeur GPU et ne déclenchent ni recalcul de mise en page ni de rendu. Évitez d'animer width, height, top, left ou margin, car cela provoque des reflows de mise en page coûteux. Le préréglage blur-in utilise filter: blur(), également composé par le GPU sur les navigateurs modernes, mais qui peut être coûteux sur mobile - testez sur des appareils d'entrée de gamme avant de livrer. Respectez toujours la media query prefers-reduced-motion de l'utilisateur en entourant votre CSS d'animation au scroll de @media (prefers-reduced-motion: no-preference) pour désactiver les animations chez ceux qui ont demandé un mouvement réduit dans les paramètres de leur système.

Foire aux questions

Un outil d'aperçu des animations au scroll vous permet de prototyper en temps réel des animations CSS déclenchées par le scroll avant de les intégrer à votre projet. Notre aperçu couvre 12 préréglages avec des réglages ajustables de durée, délai, easing, distance, seuil et stagger - le tout fonctionnant localement dans votre navigateur, sans inscription.

Les animations au scroll utilisent l'API Intersection Observer pour détecter quand les éléments entrent dans la fenêtre d'affichage. Lorsqu'un élément franchit le seuil configuré, JavaScript ajoute une classe qui déclenche une animation CSS @keyframes. L'animation démarre en pause et passe en lecture lorsque la classe est ajoutée.

Oui - l'outil d'aperçu des animations au scroll est 100 % gratuit, sans inscription, sans compte et sans limite d'utilisation. Prévisualisez et copiez autant de configurations d'animation au scroll que nécessaire, entièrement gratuit pour toujours.

Le seuil contrôle la proportion de l'élément qui doit être visible avant le déclenchement de l'animation. Un seuil de 0 déclenche dès qu'une partie entre dans la fenêtre d'affichage. Un seuil de 0,5 déclenche lorsque 50 % est visible. Utilisez 0,1-0,2 pour la plupart des animations au scroll.

Lorsque cette option est activée, l'Intersection Observer appelle unobserve() après le déclenchement de l'animation - l'élément ne s'animera plus jamais, même si l'utilisateur remonte. Lorsqu'elle est désactivée, l'animation se redéclenche chaque fois que l'élément entre dans la fenêtre d'affichage.

Le stagger ajoute un animation-delay incrémental à chaque élément enfant pour qu'ils s'animent l'un après l'autre. L'outil d'aperçu génère des sélecteurs CSS nth-child avec des délais croissants selon le délai de stagger configuré.

Pour de meilleures performances, n'animez que opacity et transform. Elles sont composées par le GPU et ne déclenchent pas de recalculs de mise en page ni de rendu. Les préréglages de l'outil n'utilisent que ces propriétés (plus filter: blur pour le préréglage blur-in).

Entourez votre CSS d'animation au scroll de @media (prefers-reduced-motion: no-preference) { ... } pour désactiver les animations pour les utilisateurs ayant demandé un mouvement réduit dans les paramètres d'accessibilité de leur système. C'est une exigence d'accessibilité importante.