Zoom on Scroll
Aussi appelée Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
Un élément ou une scène s’agrandit ou rétrécit au fil du défilement.
Usages
Intros de hero et agrandissement d’images
Variantes
- zoom in
- zoom out
Prompt
Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.
Ajoute un effet « Zoom on Scroll » (aussi appelé scroll zoom ou scale on scroll) sur [où].
Tant que la section reste à l’écran, l’élément doit grandir en douceur d’une petite carte jusqu’à remplir toute la vue, au rythme du défilement, puis rétrécir quand on remonte.
Mets-le à l’échelle sans décaler la mise en page autour, et affiche-le à sa taille finale sans zoom si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Animations similaires
Ken Burns Effect
Aussi appelée Slow pan and zoom, Ken Burns, Kenburns
Une image fixe zoome et se déplace lentement dans son cadre.
Usages
Diaporamas de hero, arrière-plans
Ajoute un « Ken Burns Effect » (aussi appelé slow pan and zoom) sur [où].
Pendant qu’elle est affichée, chaque image doit zoomer et glisser très lentement dans une seule direction, puis passer en fondu enchaîné à l’image suivante, qui se déplace dans une autre direction : calme et continu.
Fais en sorte que chaque image couvre tout son cadre à tout moment pour qu’aucun bord n’apparaisse, et garde les images immobiles si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).A
Faites défiler à l’intérieur
Scroll-Linked Animation
Aussi appelée Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
La progression de l’animation est liée directement à la position de défilement : défiler vers l’avant ou l’arrière la joue ou la rembobine.
Usages
Pages narratives et effets de progression
Ajoute une « Scroll-Linked Animation » (aussi appelée scroll-driven animation ou scroll scrub) sur [où].
L’animation doit suivre exactement la position de défilement : descendre la fait avancer, remonter la rembobine aussitôt, sans easing temporel propre.
Associe toute l’animation à une plage de défilement claire, et affiche un état statique cohérent si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Survolez la démo
Hover Zoom (zoom au survol)
Aussi appelée Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
Une image s’agrandit dans son cadre au survol, parfois en se déplaçant avec le pointeur.
Usages
Cartes produit, miniatures
Ajoute un zoom au survol (Hover Zoom), aussi appelé image zoom on hover ou zoom-pan, sur [où].
Tant que le pointeur est sur l’image, elle doit s’agrandir lentement et en douceur dans son cadre, qui garde sa taille, puis revenir en douceur quand il sort.
Rogne l’image à son cadre pour que rien ne déborde de la mise en page, et applique le même zoom au focus clavier.A
B
C
D
Faites défiler à l’intérieur
Parallax (effet de parallaxe)
Aussi appelée Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
Des calques se déplacent à des vitesses différentes au défilement pour créer une impression de profondeur.
Usages
Arrière-plans de hero, landing pages
Ajoute un effet de parallaxe (Parallax) au défilement sur [où], aussi appelé parallax scrolling ou parallax layers.
Les calques d’arrière-plan doivent se déplacer plus lentement que le contenu pendant le défilement, le plus éloigné bougeant le moins, pour une impression de profondeur discrète.
Garde-le lié à la position de défilement sans décalage, laisse le texte sur le calque à vitesse normale, et désactive l’effet si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).Autres animations : Scroll
Faites défiler à l’intérieur
Hide on Scroll Header
Aussi appelée Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
Un en-tête se masque quand on fait défiler vers le bas et réapparaît quand on remonte.
Usages
Barres de navigation sur mobile et pages longues
Ajoute un « Hide on Scroll Header » (aussi appelé headroom ou auto-hide navbar) sur [où].
L’en-tête doit glisser vers le haut hors de la vue quand on fait défiler vers le bas et revenir dès qu’on remonte : rapide et fluide, en réagissant au sens du défilement plutôt qu’à la distance.
Affiche-le toujours tout en haut de la page, ignore les petits à-coups de défilement, et garde-le visible tant qu’un élément à l’intérieur a le focus clavier.A
B
C
D
E
Faites défiler à l’intérieur
Horizontal Scroll Section (défilement horizontal)
Aussi appelée Horizontal Scrolling, Scroll-jacked Horizontal Gallery
Le défilement vertical fait glisser latéralement une rangée de panneaux épinglée.
Usages
Galeries, portfolios, frises chronologiques
Ajoute une section à défilement horizontal (Horizontal Scroll Section) sur [où], aussi appelée horizontal scrolling ou scroll-jacked horizontal gallery.
Quand la section atteint le haut, elle doit rester épinglée pendant que le défilement vers le bas fait glisser sa rangée de panneaux sur le côté, puis se libérer une fois le dernier panneau visible.
Lie le mouvement latéral directement à la position de défilement pour que remonter l’inverse, et reviens à une rangée normale qu’on fait glisser au doigt sur petit écran ou si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).