Effets Scroll & Parallax
Animations scroll, parallax, scroll-driven CSS, scrollytelling, sticky et snap.
Comment creer des experiences de scroll immersives ? Le defilement est l'interaction la plus frequente sur le web : chaque visiteur scrolle. Exploiter ce geste pour reveler du contenu, creer du mouvement et raconter une histoire transforme une page ordinaire en une experience engageante. Ces 64 effets de scroll couvrent tous les patterns modernes : parallax, revelations progressives, barres de progression, sections sticky et scroll-driven animations CSS natif.
Utilisez le parallax pour vos pages d'accueil et vos landing pages, les revelations au scroll pour vos pages "a propos" ou vos timelines, et les barres de progression pour indiquer l'avancement dans un article long. Les effets sticky sont ideaux pour les tableaux de prix ou les comparatifs. Le scroll snap cree une navigation par section fluide, parfaite pour les presentations et les portfolios.
Chaque effet utilise les API modernes du navigateur, dont les scroll-driven animations CSS natives quand elles sont disponibles, pour des performances optimales sans JavaScript lourd. Le code est pret a copier, documente et teste. Effect.Labs vous evite des jours de recherche et de mise au point sur les animations au defilement.
Scroll Basics
20 effets fondamentaux de scroll et parallax.
Premier element
Apparait en montant avec un fondu
Deuxieme element
Animation progressive au scroll
Troisieme element
Utilise animation-timeline: view()
Quatrieme element
Chaque element s'anime individuellement
Cinquieme element
Tout en CSS, zero JavaScript
Fade Up
Elements qui apparaissent en montant avec un fondu progressif via animation-timeline: view().
Scale In
Elements qui grossissent depuis une taille reduite avec animation-timeline: view().
Slide In
Elements glissant depuis la gauche et la droite en alternance via view().
Parallax
Effet de parallaxe ou l'arriere-plan bouge a vitesse differente via scroll(nearest).
Progress Reveal
Texte qui se remplit progressivement avec un gradient anime par scroll(nearest) et @property.
Stagger Cards
Cartes apparaissant en cascade avec animation-delay incremental et view().
Horizontal Scroll
Defilement horizontal avec scroll-snap pour une navigation fluide entre les elements.
Rotate In
Cartes apparaissant avec rotation et scale via view() et animation-delay.
Blur Reveal
Effet de mise au point progressive avec blur(20px) anime vers blur(0) via view().
Counter Scroll
Compteurs animes qui s'incrementent lorsqu'ils entrent dans la vue du conteneur.
Scroll-Driven Fade
Animation CSS native pilotee par le scroll avec animation-timeline: view() et entry range.
View Timeline Scale
Elements qui s'agrandissent progressivement via animation-timeline: view() et cover range.
Scroll Progress Bar
Barre de progression sticky liee au scroll du conteneur via scroll(nearest).
Parallax Layers CSS
Couches se deplacant a vitesses differentes via scroll(nearest) pour un effet de profondeur.
Rotate On Scroll
Element effectuant une rotation de 720 degres liee au scroll via scroll(nearest).
Slide In CSS Native
Slide gauche/droite natif CSS avec animation-timeline: view() et cover range.
Blur to Clear
Transition de blur(10px) a blur(0) pour un effet cinematographique via view().
Stagger Reveal CSS
Grille d'items avec animation-delay incremental CSS natif et view() pour un effet cascade.
Clip Path Reveal
Revelation progressive via clip-path: inset() anime par view() et cover range.
Color Change
Changement de couleur progressif (violet, rose, cyan, vert) lie au scroll via scroll(nearest).
Barre de progression
Scrollez pour voir la barre se remplir. Utilise animation-timeline: scroll() pour lier l'animation au défilement du conteneur.
Progress Bar
Barre de progression liée au scroll via animation-timeline: scroll(). Se remplit de 0% à 100% en CSS pur.
Fade In Reveal
Éléments qui apparaissent progressivement via animation-timeline: view() et animation-range: entry.
Parallax Layers
Couches parallaxes avec des vitesses différentes, pilotées uniquement par scroll() en CSS natif.
Scale on Scroll
Cartes qui grandissent de 70% à 100% en entrant dans la vue via animation-timeline: view().
Color Shift
Gradient de fond qui évolue à travers 5 palettes de couleurs en scrollant, via animation-timeline: scroll().
Text Reveal
Mots qui glissent depuis le bas et se révèlent progressivement au défilement avec view().
Rotate on Scroll
Forme géométrique avec rotation à 720° liée au scroll. Les bordures tournent en sens inverse.
Slide In Cards
Cartes qui glissent alternativement depuis la gauche et la droite avec view() et animation-range: entry.
Zoom & Blur
Cercle qui zoome et se défloute au centre du scroll, puis continue à zoomer et se refloute en sortant.
Horizontal Scroll
Scroll vertical converti en défilement horizontal des cartes via animation-timeline: scroll().
Chapitre 1 : Introduction
Bienvenue dans cette démonstration de barre de progression liée au scroll. La barre en haut de ce conteneur progresse en fonction de votre position de défilement.
Cet effet utilise la propriété CSS animation-timeline: scroll() qui lie une animation @keyframes directement à la position de défilement du conteneur.
Chapitre 2 : Fonctionnement
La propriété scroll-timeline crée un timeline nommé sur le conteneur scrollable. L'animation progress-bar utilise ensuite ce timeline pour animer la propriété transform: scaleX().
Le résultat est une barre de progression fluide qui représente exactement le pourcentage de contenu lu, sans aucun JavaScript.
Chapitre 3 : Applications
Idéal pour les articles de blog, les pages de documentation, les tutoriels ou tout contenu long où l'utilisateur souhaite visualiser sa progression de lecture.
Compatible avec les navigateurs modernes supportant les Scroll-Driven Animations (Chrome 115+, Edge 115+).
Chapitre 4 : Conclusion
Les animations liées au scroll ouvrent de nouvelles possibilités pour l'expérience utilisateur, le tout en CSS pur sans impact sur les performances JavaScript.
Progress Bar
Barre de progression de lecture pilotée par animation-timeline: scroll(), zéro JavaScript.
Scroll Fade Gallery
Images qui apparaissent en fondu et s'agrandissent à l'entrée du viewport via animation-timeline: view().
Horizontal Scroll Section
Section défilant horizontalement lors du scroll vertical, pur CSS avec scroll-timeline.
Sticky Reveal Stack
Cartes s'empilant et se révélant une par une au scroll avec view() timeline.
Text Line Reveal
Chaque mot se colore progressivement lors du scroll via animation-range et view().
Zoom Into Content
Contenu démarrant dézoomé qui s'agrandit à 100% au scroll, effet d'ouverture cinématique.
Rotation on Scroll
Élément tournant proportionnellement à la position de scroll, effet cadran/boussole.
Path Drawing on Scroll
Tracé SVG se dessinant via stroke-dashoffset animé par le scroll, pur CSS.
Parallax Layers
Parallaxe multi-couches entièrement contrôlé par scroll() timeline, sans JS.
Snap Gallery with Progress
Galerie snap-scrolling avec barre de progression et dots liés au scroll, pur CSS.
Progress Bar
Barre de progression horizontale qui se remplit proportionnellement au defilement du contenu.
Parallax Layers
Trois couches visuelles se deplacent a des vitesses differentes pour creer un effet de profondeur immersif.
Reveal on Scroll
Les elements apparaissent avec un fondu et un glissement vertical lorsqu'ils entrent dans la zone visible.
Sticky Horizontal
Defilement horizontal automatique simulant une navigation par panneaux, ideal pour presenter des etapes ou des projets.
Text Highlight on Scroll
Chaque mot s'illumine progressivement au fur et a mesure du defilement, creant un effet de lecture guidee.
Zoom on Scroll
Un element grossit progressivement avec le defilement, passant d'un petit objet a une vue plein ecran.
Number Counter Scroll
Les compteurs s'animent de zero a leur valeur cible proportionnellement a la position de defilement.
Timeline Scroll
Chronologie verticale interactive avec une ligne qui se dessine progressivement et des elements qui apparaissent au defilement.
Image Sequence
Simulation d'animation image par image pilotee par le scroll, similaire aux pages produit Apple.
Scroll Snap Sections
Sections pleine hauteur avec accrochage magnetique et indicateur de pagination lateral.
Sticky Scroll
8 effets de scroll sticky et parallax avances.
Premiere Section
L'image reste fixe pendant que le contenu defile. Technique ideale pour presenter des fonctionnalites.
Deuxieme Section
Chaque section de texte declenche un changement visuel dans l'image sticky.
Troisieme Section
Les transitions douces guident l'utilisateur a travers le contenu de maniere fluide.
Quatrieme Section
Pattern utilise dans le journalisme interactif et les sites de produits.
Sticky Image Change
Image sticky qui change pendant que le contenu defile avec des panneaux reveles via view().
Horizontal Scroll
Section a defilement horizontal avec snap pour naviguer entre les etapes du workflow.
Card Stack
Cartes qui s'empilent avec position sticky et animation view() dans le conteneur.
Progress Reveal
Barre de progression sticky avec items reveles progressivement via scroll(nearest) et view().
Split Screen Sticky
Visuel sticky avec SVG rotatif et contenu revele par scroll via view() et scroll(nearest).
Zoom In Sticky
Element qui zoome progressivement de scale(1) a scale(2.2) via scroll(nearest).
Text Highlight Scroll
Mots colores sequentiellement au scroll avec JS scope au conteneur.
Layered Parallax
5 couches se deplacant a vitesses differentes via scroll(nearest) pour un effet parallax complet.
Scroll Snap
6 effets de scroll snap pour une navigation precise.
Section 1
Faites defiler pour passer a la suivante
Section 2
Le scroll s'arrete automatiquement
Section 3
Experience fluide et controlee
Section 4
Dernière section
Vertical Snap
Sections s'ancrant automatiquement au debut via scroll-snap-type: y mandatory.
Horizontal Snap
Defilement horizontal avec ancrage automatique via scroll-snap-type: x mandatory.
Card Snap Carousel
Carrousel de cartes s'alignant au centre avec scroll-snap-align: center.
Mixed Content Snap
Sections de tailles differentes avec scroll-snap-type: y proximity pour flexibilite.
Snap + Progress
Snap vertical avec barre de progression et dots indicateurs via JS scope au conteneur.
Smooth Snap
Snap avec animations declenchees par IntersectionObserver scope au conteneur.
SVG Blinds Mask Transition
30 stores venitiens qui s'ouvrent au scroll pour reveler 3 images en sequence. Effet cinematographique.
Corner Morph Overlay
Cadre fixe qui morphe au scroll : square, squircle, round, bevel, scoop, notch. Mix-blend-mode exclusion.
Corner Morph Cards
3 cartes en cascade qui se transforment au scroll avec stagger. 6 formes inspirees de superellipse().
Concentric Rings Morph
10 anneaux concentriques qui morphent en cascade : carre, diamant (rotation 45deg), cercle.
3D Depth Gallery
Galerie immersive Three.js : la caméra plonge dans une pile d'images, crossfade fluide, fond qui prend la couleur dominante, parallaxe au curseur. Sensation de profondeur cinématique.
💡 Idéal pour : portfolio créatif, showcase produit, galerie d'études de cas, page « notre travail », storytelling au scroll.
Chapitre 1 — Le principe
Scrollez à l'intérieur de cette zone : la barre lumineuse à gauche se remplit au rythme exact de votre lecture, avec un halo qui réagit à la position. Plus vous avancez, plus le faisceau monte.
Chapitre 2 — Le repère
Le curseur lumineux glisse le long de l'axe vertical. C'est un repère de progression élégant et discret, parfait pour un article long, une page de documentation ou un récit qui se déroule au scroll.
Chapitre 3 — La mécanique
Aucune dépendance externe : un simple écouteur de scroll calcule le ratio défilé / hauteur totale et met à jour une variable CSS. Léger, fluide, et entièrement accessible.
Chapitre 4 — La performance
L'écouteur est passif et ne touche qu'à une custom property, donc zéro reflow coûteux. Le rendu reste à 60 fps même sur mobile, et la barre suit le doigt au pixel près.
Chapitre 5 — L'accessibilité
La barre est purement décorative (aria-hidden) : le contenu reste pleinement lisible et navigable au clavier. En mode « mouvement réduit », le défilement instantané remplace le smooth-scroll.
Chapitre 6 — La fin
Arrivé tout en bas, la barre est pleine à 100% et le pourcentage l'indique. Un repère clair, du début à la fin, sans jamais voler l'attention au contenu.
Scroll Progress Beam
Une barre lumineuse latérale qui se remplit avec la progression du scroll, halo réactif et curseur glissant. Repère de lecture premium et discret.
💡 Idéal pour : barre de progression d'article, page longue / docs, onboarding multi-sections, landing storytelling.
Scroll Velocity Feedback
Les éléments réagissent à la vitesse de défilement : étirement et inclinaison dynamiques qui donnent de la matière au scroll, puis retour au net à l'arrêt.
💡 Idéal pour : galerie éditoriale, grille de projets, feed immersif, page « about » créative.
Pinned Image Sequence
Un objet épinglé dont la rotation 360° est pilotée par le scroll, façon séquence produit Apple. Ici, un vrai modèle 3D (.glb auto-hébergé, chargé à la demande) tourne au défilement.
💡 Idéal pour : vue produit 360°, démontage/feature reveal, page de lancement, tutoriel visuel étape par étape.
Sticky Horizontal Reveal
Une section épinglée dont le contenu défile horizontalement au scroll vertical. Raconte une progression (process, timeline, étapes) de façon cinématique.
💡 Idéal pour : présentation de process/étapes, timeline, showcase portfolio, page produit narrative.
Scroll Choreography Sequence
Orchestration multi-éléments : titre, texte, badges et CTA entrent en cascade sur la timeline de scroll, comme une scène qui se monte. Chaque élément a sa fenêtre de progression.
💡 Idéal pour : hero de landing qui s'assemble, présentation de fonctionnalités, storytelling de marque, section « manifeste ».