Scroll & Parallax | Effects.lab

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

Scrollez ↓

Fade Up

Elements qui apparaissent en montant avec un fondu progressif via animation-timeline: view().

CSSScrollFade

Scale In

L'element grossit progressivement

Effet zoom

De scale(0.7) a scale(1)

Apparition douce

Combine opacity et transform

CSS natif

Aucun JavaScript necessaire

Performance

Utilise les proprietes GPU

Scrollez ↓

Scale In

Elements qui grossissent depuis une taille reduite avec animation-timeline: view().

CSSScaleScroll

Depuis la gauche

Glisse depuis le cote gauche

Depuis la droite

Glisse depuis le cote droit

Alternance gauche

Cree un rythme visuel

Alternance droite

Effet de serpentin

Dernier gauche

Animation fluide CSS native

Dernier droite

Zero JavaScript requis

Scrollez ↓

Slide In

Elements glissant depuis la gauche et la droite en alternance via view().

CSSSlideScroll

PARALLAX

Couche arriere

Le fond se deplace plus lentement

Couche avant

Le contenu avance normalement

Effet profondeur

Cree une sensation de 3D

Scrollez ↓

Parallax

Effet de parallaxe ou l'arriere-plan bouge a vitesse differente via scroll(nearest).

CSSParallaxScroll

REVEAL

Le texte se remplit selon la progression du scroll

Scrollez ↓

Progress Reveal

Texte qui se remplit progressivement avec un gradient anime par scroll(nearest) et @property.

CSSProgressGradient

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Scrollez ↓

Stagger Cards

Cartes apparaissant en cascade avec animation-delay incremental et view().

CSSStaggerCards

Scrollez →

Horizontal Scroll

Defilement horizontal avec scroll-snap pour une navigation fluide entre les elements.

CSSHorizontalSnap

Design

Code

Performance

3D

Rapide

Securise

Scrollez ↓

Rotate In

Cartes apparaissant avec rotation et scale via view() et animation-delay.

CSSRotateStagger

Blur Reveal

Effet de mise au point progressif

Effet Cinema

De flou total a nettete parfaite

CSS Natif

Animation via view() sans JavaScript

Scrollez ↓

Blur Reveal

Effet de mise au point progressive avec blur(20px) anime vers blur(0) via view().

CSSBlurReveal

Projets

Satisfaction

0/7

Support

Utilisateurs

Scrollez ↓

Counter Scroll

Compteurs animes qui s'incrementent lorsqu'ils entrent dans la vue du conteneur.

JSCounterScroll

Scroll-Driven Animation

Animation native CSS pilotee par le scroll

Apparition progressive

L'element apparait en entrant dans la vue

Entry range

animation-range: entry 0% entry 100%

Zero JavaScript

Tout est gere par le CSS

Performance GPU

Animations optimisees pour le GPU

Scrollez ↓

Scroll-Driven Fade

Animation CSS native pilotee par le scroll avec animation-timeline: view() et entry range.

CSSViewFade

View Timeline Scale

L'element s'agrandit selon sa position dans la vue

Scale progressif

De scale(0.7) a scale(1) fluidement

Cover range

animation-range: entry 0% cover 50%

CSS pur

Aucune dependance JavaScript

Fluide

Animation continue liee au scroll

Scrollez ↓

View Timeline Scale

Elements qui s'agrandissent progressivement via animation-timeline: view() et cover range.

CSSScaleView

Barre de Progression

La barre en haut suit votre scroll dans ce conteneur via animation-timeline: scroll(nearest).

Scrollez ↓

Scroll Progress Bar

Barre de progression sticky liee au scroll du conteneur via scroll(nearest).

CSSProgressSticky

PARALLAX

Chaque couche bouge a sa propre vitesse

Scrollez ↓

Parallax Layers CSS

Couches se deplacant a vitesses differentes via scroll(nearest) pour un effet de profondeur.

CSSParallaxLayers

720 de rotation liee au scroll

Scrollez ↓

Rotate On Scroll

Element effectuant une rotation de 720 degres liee au scroll via scroll(nearest).

CSSRotateScroll

Slide Left

Animation CSS native depuis la gauche avec view()

Slide Right

Animation CSS native depuis la droite avec view()

Gauche encore

Pattern alterne pour dynamisme

Droite encore

Chaque element s'anime individuellement

Avant-dernier

animation-range: entry 0% cover 40%

Dernier

Zero JavaScript, performance optimale

Scrollez ↓

Slide In CSS Native

Slide gauche/droite natif CSS avec animation-timeline: view() et cover range.

CSSSlideNative

Blur to Clear

Transition progressive de flou vers nettete

Cover Range

animation-range: entry 0% cover 50%

Cinematographique

Effet de rack focus pur CSS

Scrollez ↓

Blur to Clear

Transition de blur(10px) a blur(0) pour un effet cinematographique via view().

CSSBlurView

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Scrollez ↓

Stagger Reveal CSS

Grille d'items avec animation-delay incremental CSS natif et view() pour un effet cascade.

CSSStaggerNative

Clip Path Reveal

Revelation progressive de gauche a droite

Direction Verticale

Le contenu se revele de haut en bas

Montee Inversee

Apparition depuis le bas du cadre

Scrollez ↓

Clip Path Reveal

Revelation progressive via clip-path: inset() anime par view() et cover range.

CSSClip-pathReveal

Scrollez!

La couleur change selon la progression du scroll

Scrollez ↓

Color Change

Changement de couleur progressif (violet, rose, cyan, vert) lie au scroll via scroll(nearest).

CSSColorScroll

Barre de progression

Scrollez pour voir la barre se remplir. Utilise animation-timeline: scroll() pour lier l'animation au défilement du conteneur.

Scrollez ↓

Progress Bar

Barre de progression liée au scroll via animation-timeline: scroll(). Se remplit de 0% à 100% en CSS pur.

CSS Scroll Progress

Premier élément

Apparaît en glissant depuis le bas

Deuxième élément

Se révèle au scroll avec animation-timeline: view()

Troisième élément

Chaque carte s'anime individuellement

Quatrième élément

animation-range contrôle le timing

Cinquième élément

Tout en CSS, zéro JavaScript

Scrollez ↓

Fade In Reveal

Éléments qui apparaissent progressivement via animation-timeline: view() et animation-range: entry.

CSS View Reveal

Parallax CSS

Chaque couche bouge à une vitesse différente

Scrollez ↓

Parallax Layers

Couches parallaxes avec des vitesses différentes, pilotées uniquement par scroll() en CSS natif.

CSS Parallax Layers

Design System

Apparaît avec un effet de zoom

User Experience

Scale de 0.7 à 1 au scroll

Responsive

animation-range: entry 0% entry 50%

Scrollez ↓

Scale on Scroll

Cartes qui grandissent de 70% à 100% en entrant dans la vue via animation-timeline: view().

CSS Scale View

Color Shift

Le fond change de couleur au scroll

Scrollez ↓

Color Shift

Gradient de fond qui évolue à travers 5 palettes de couleurs en scrollant, via animation-timeline: scroll().

CSS Gradient Scroll

Animations

Apparition mot par mot au scroll

Pilotées

animation-timeline: view()

Par le

Pas de JavaScript requis

Scroll CSS

CSS natif uniquement

Scrollez ↓

Text Reveal

Mots qui glissent depuis le bas et se révèlent progressivement au défilement avec view().

CSS Text Reveal

720° sur toute la hauteur

Scrollez ↓

Rotate on Scroll

Forme géométrique avec rotation à 720° liée au scroll. Les bordures tournent en sens inverse.

CSS Rotate Scroll

Depuis la gauche

Carte impaire → glisse de gauche

Depuis la droite

Carte paire → glisse de droite

Alternance

nth-child(even) inverse la direction

Performant

Uniquement transform + opacity

CSS natif

Zéro dépendance JavaScript

Scrollez ↓

Slide In Cards

Cartes qui glissent alternativement depuis la gauche et la droite avec view() et animation-range: entry.

CSS Slide View

Zoom in → net → zoom out

Scrollez ↓

Zoom & Blur

Cercle qui zoome et se défloute au centre du scroll, puis continue à zoomer et se refloute en sortant.

CSS Zoom Blur

Carte 1

Scroll vertical

Carte 2

→ mouvement horizontal

Carte 3

animation-timeline

Carte 4

scroll(nearest)

Carte 5

CSS pur

Scrollez ↓

Horizontal Scroll

Scroll vertical converti en défilement horizontal des cartes via animation-timeline: scroll().

CSS Horizontal 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.

Scrollez pour voir l'effet

Progress Bar

Barre de progression de lecture pilotée par animation-timeline: scroll(), zéro JavaScript.

CSS scroll() Progress

Scrollez pour voir l'effet

Scroll Fade Gallery

Images qui apparaissent en fondu et s'agrandissent à l'entrée du viewport via animation-timeline: view().

CSS view() Gallery

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Scrollez verticalement

Horizontal Scroll Section

Section défilant horizontalement lors du scroll vertical, pur CSS avec scroll-timeline.

CSS scroll-timeline Horizontal

Layer 1 - Foundation

Layer 2 - Structure

Layer 3 - Design

Layer 4 - Polish

Layer 5 - Launch

Scrollez pour empiler

Sticky Reveal Stack

Cartes s'empilant et se révélant une par une au scroll avec view() timeline.

CSS view() Stack

Les animations scroll-driven permettent de créer des expériences immersives et performantes en CSS pur, sans aucune ligne de JavaScript. Chaque mot se révèle progressivement en fonction de sa position dans le viewport. La propriété animation-range contrôle précisément quand l'animation commence et se termine.

Scrollez pour révéler

Text Line Reveal

Chaque mot se colore progressivement lors du scroll via animation-range et view().

CSS animation-range Text

Effects.lab

La bibliothèque d'effets premium

Découvrir

Un second bloc qui apparaît aussi en zoom cinématique.

Scrollez pour zoomer

Zoom Into Content

Contenu démarrant dézoomé qui s'agrandit à 100% au scroll, effet d'ouverture cinématique.

CSS view() Zoom

SCROLL TO ROTATE

Scrollez pour tourner

Rotation on Scroll

Élément tournant proportionnellement à la position de scroll, effet cadran/boussole.

CSS scroll() Rotation

Scrollez pour dessiner

Path Drawing on Scroll

Tracé SVG se dessinant via stroke-dashoffset animé par le scroll, pur CSS.

CSS SVG scroll()

Scrollez pour le parallax

Parallax Layers

Parallaxe multi-couches entièrement contrôlé par scroll() timeline, sans JS.

CSS scroll() Parallax

01 Slide One

02 Slide Two

03 Slide Three

04 Slide Four

05 Slide Five

Scrollez entre les slides

Snap Gallery with Progress

Galerie snap-scrolling avec barre de progression et dots liés au scroll, pur CSS.

CSS scroll-snap Progress

Introduction

Le scrollytelling est une technique narrative qui utilise le defilement de la page pour guider l'utilisateur a travers une histoire visuelle immersive.

Chapitre 1

Les animations declenchees par le scroll permettent de reveler progressivement le contenu, creant un rythme naturel de lecture qui captive l'attention.

Chapitre 2

En combinant parallaxe, transitions et effets visuels, chaque section devient une scene dans un recit plus large, transformant un simple site web en experience narrative.

Chapitre 3

Les meilleurs exemples de scrollytelling equilibrent esthetique et fonctionnalite, guidant l'utilisateur sans le submerger d'effets excessifs.

Conclusion

Maitrisez ces techniques pour creer des experiences web memorables qui racontent votre histoire avec elegance et fluidite.

Scrollez pour explorer

Progress Bar

Barre de progression horizontale qui se remplit proportionnellement au defilement du contenu.

CSS JavaScript UX

PARALLAXE

Scrollez pour explorer

Parallax Layers

Trois couches visuelles se deplacent a des vitesses differentes pour creer un effet de profondeur immersif.

CSS JavaScript Parallaxe

Design Systeme

Construisez une base solide avec des tokens, composants et patterns reutilisables pour une coherence visuelle parfaite.

Motion Design

Donnez vie a vos interfaces avec des animations fluides et significatives qui guident l'attention de l'utilisateur.

Micro-interactions

Les petits details font la difference. Chaque hover, clic et transition contribue a une experience memorable.

Accessibilite

Un design inclusif garantit que chaque utilisateur peut naviguer et interagir avec votre contenu sans friction.

Performance

Optimisez chaque animation pour maintenir 60fps et offrir une experience fluide sur tous les appareils.

Scrollez pour explorer

Reveal on Scroll

Les elements apparaissent avec un fondu et un glissement vertical lorsqu'ils entrent dans la zone visible.

IntersectionObserver CSS Animation

01 Decouverte

02 Exploration

03 Creation

04 Iteration

05 Livraison

Sticky Horizontal

Defilement horizontal automatique simulant une navigation par panneaux, ideal pour presenter des etapes ou des projets.

CSS Animation Auto-play

                Le
                scrollytelling
                transforme
                le
                defilement
                en
                experience
                narrative.
                Chaque
                mouvement
                de
                la
                molette
                revele
                un
                nouveau
                chapitre
                de
                votre
                histoire.
                Les
                mots
                s'illuminent
                progressivement,
                guidant
                le
                regard
                a
                travers
                le
                contenu.
                Cette
                technique
                cree
                un
                rythme
                naturel
                de
                lecture
                qui
                captive
                l'attention
                et
                renforce
                l'impact
                emotionnel
                du
                message.
                Utilisee
                par
                les
                plus
                grands
                editeurs
                et
                agences
                creatives,
                cette
                approche
                donne
                vie
                au
                texte
                statique.
              

Scrollez pour explorer

Text Highlight on Scroll

Chaque mot s'illumine progressivement au fur et a mesure du defilement, creant un effet de lecture guidee.

JavaScript CSS Typographie

ZOOM

Scrollez pour explorer

Zoom on Scroll

Un element grossit progressivement avec le defilement, passant d'un petit objet a une vue plein ecran.

JavaScript CSS Transform Scroll

Statistiques du projet

Utilisateurs

Satisfaction

Telechargements

Pays

Scrollez pour animer les compteurs

Performance

0fps

Fluidite

Score Lighthouse

Scrollez pour explorer

Number Counter Scroll

Les compteurs s'animent de zero a leur valeur cible proportionnellement a la position de defilement.

JavaScript Animation Data

2019

Concept Initial

Premiere ebauche du projet, recherche utilisateur et definition de la vision produit.

2020

Prototype & Tests

Developpement du MVP, sessions de tests utilisateurs et iterations rapides.

2021

Lancement Beta

Ouverture aux premiers utilisateurs beta, collecte de feedback et ameliorations.

2022

Version 1.0

Lancement officiel avec toutes les fonctionnalites cles et une base d'utilisateurs fideles.

2023

Expansion Mondiale

Deploiement international, partenariats strategiques et croissance exponentielle.

2024

Innovation Continue

Integration IA, nouvelles fonctionnalites et vision a long terme pour l'avenir.

Scrollez pour explorer

Timeline Scroll

Chronologie verticale interactive avec une ligne qui se dessine progressivement et des elements qui apparaissent au defilement.

JavaScript CSS Timeline

Frame 1 / 24

Scrollez pour explorer

Image Sequence

Simulation d'animation image par image pilotee par le scroll, similaire aux pages produit Apple.

JavaScript CSS Sequence

Rapidite

Temps de chargement optimise pour une experience instantanee.

Modularite

Composants independants et reutilisables a l'infini.

Elegance

Des interfaces soignees avec une attention meticuleuse aux details.

Fiabilite

Stabilite et securite pour une confiance totale des utilisateurs.

Excellence

Standards eleves et amelioration continue a chaque iteration.

Scrollez pour explorer

Scroll Snap Sections

Sections pleine hauteur avec accrochage magnetique et indicateur de pagination lateral.

CSS Scroll Snap JavaScript Navigation

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.

Scrollez ↓

Sticky Image Change

Image sticky qui change pendant que le contenu defile avec des panneaux reveles via view().

CSSStickyScroll

01 Design

02 Develop

03 Test

04 Deploy

05 Monitor

06 Iterate

Scrollez →

Horizontal Scroll

Section a defilement horizontal avec snap pour naviguer entre les etapes du workflow.

CSSHorizontalSticky

First Card

Second Card

Third Card

Fourth Card

Fifth Card

Scrollez ↓

Card Stack

Cartes qui s'empilent avec position sticky et animation view() dans le conteneur.

CSSStackSticky

Etape 1: Conception

Definissez votre vision et planifiez votre projet.

Etape 2: Developpement

Transformez vos idees en code propre et efficace.

Etape 3: Tests

Assurez la qualite et la fiabilite du produit.

Etape 4: Lancement

Deployez votre projet et celebrez votre succes.

Scrollez ↓

Progress Reveal

Barre de progression sticky avec items reveles progressivement via scroll(nearest) et view().

CSSProgressReveal

Architecture Moderne

Applications evolutives bien pensees.

Microservices
API RESTful
Cloud Native

Performance Optimale

Optimisez chaque aspect de votre app.

Lazy Loading
Code Splitting
Caching

Securite Renforcee

Protegez vos donnees et utilisateurs.

2FA
Chiffrement E2E
Audits

Scrollez ↓

Split Screen Sticky

Visuel sticky avec SVG rotatif et contenu revele par scroll via view() et scroll(nearest).

CSSSplitSticky

ZOOM

Zoom progressif lie au scroll

Scrollez ↓

Zoom In Sticky

Element qui zoome progressivement de scale(1) a scale(2.2) via scroll(nearest).

CSSZoomScroll

Scrollez ↓

Text Highlight Scroll

Mots colores sequentiellement au scroll avec JS scope au conteneur.

JSTextHighlight

Parallax Layers

Chaque couche se deplace a une vitesse differente

Scrollez ↓

Layered Parallax

5 couches se deplacant a vitesses differentes via scroll(nearest) pour un effet parallax complet.

CSSParallaxLayers

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

Derniere section

Scrollez ↓

Vertical Snap

Sections s'ancrant automatiquement au debut via scroll-snap-type: y mandatory.

CSSSnapVertical

Slide 1

Faites glisser horizontalement

Slide 2

Navigation intuitive

Slide 3

Parfait pour les galeries

Slide 4

Experience mobile optimisee

Slide 5

Derniere diapositive

Scrollez →

Horizontal Snap

Defilement horizontal avec ancrage automatique via scroll-snap-type: x mandatory.

CSSSnapHorizontal

Projet Alpha

Interface moderne avec animations fluides.

Design

Projet Beta

Application web progressive performante.

Dev

Projet Gamma

Plateforme e-commerce immersive.

E-commerce

Projet Delta

Dashboard analytique temps reel.

Analytics

Projet Epsilon

Application mobile cross-platform.

Mobile

Projet Zeta

Systeme de gestion de contenu.

CMS

Scrollez →

Card Snap Carousel

Carrousel de cartes s'alignant au centre avec scroll-snap-align: center.

CSSCarouselSnap

Section Principale

Hauteur complete

Section Moyenne

Demi-hauteur

Section Moyenne

Demi-hauteur

Petite

Compacte

Section Finale

Retour hauteur complete

Scrollez ↓

Mixed Content Snap

Sections de tailles differentes avec scroll-snap-type: y proximity pour flexibilite.

CSSMixedSnap

Etape 1

Commencez votre parcours

Etape 2

Progression en cours

Etape 3

A mi-chemin

Etape 4

Presque termine

Etape 5

Mission accomplie!

Scrollez ↓

Snap + Progress

Snap vertical avec barre de progression et dots indicateurs via JS scope au conteneur.

JSSnapProgress

🚀

Lancement

Demarrez avec style et elegance

💡

Innovation

Des idees qui transforment

🎯

Precision

Chaque detail compte

✨

Excellence

Le resultat final parfait

Scrollez ↓

Smooth Snap

Snap avec animations declenchees par IntersectionObserver scope au conteneur.

JSSnapSmooth

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus

Scroll Basics

Premier element

Deuxieme element

Troisieme element

Quatrieme element

Cinquieme element

Fade Up

Scale In

Effet zoom

Apparition douce

CSS natif

Performance

Scale In

Depuis la gauche

Depuis la droite

Alternance gauche

Alternance droite

Dernier gauche

Dernier droite

Slide In

Couche arriere

Couche avant

Effet profondeur

Parallax

Progress Reveal

Stagger Cards

Horizontal Scroll

Design

Code

Performance

3D

Rapide

Securise

Rotate In

Blur Reveal

Effet Cinema

CSS Natif

Blur Reveal

Counter Scroll

Scroll-Driven Animation

Apparition progressive

Entry range

Zero JavaScript

Performance GPU

Scroll-Driven Fade

View Timeline Scale

Scale progressif

Cover range

CSS pur

Fluide

View Timeline Scale

Barre de Progression

Scroll Progress Bar

Parallax Layers CSS

Rotate On Scroll

Slide Left

Slide Right

Gauche encore

Droite encore

Avant-dernier

Dernier

Slide In CSS Native

Blur to Clear

Cover Range

Cinematographique

Blur to Clear

Stagger Reveal CSS

Clip Path Reveal

Direction Verticale

Montee Inversee

Clip Path Reveal

Color Change

Barre de progression

Progress Bar

Premier élément

Deuxième élément