Parallax
Un fond dégradé qui glisse de +60 à −60 px sur les 520 px de course d'une boîte de 280 px (animation-timeline: scroll()), et trois cartes à backdrop-filter qui montent de 30 px et passent de 0 à 1 d'opacité pendant leurs 33 premiers pixels dans la boîte (view(), entry → entry 50 %). Deux timelines CSS, zéro JavaScript, 3,1 Ko.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Scroll comprend 70 effets, dont 12 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le HTML vendu : le cadre .demo-preview (flex centré, min-height: 300px, fond #0a0a0f, texte blanc, sans-serif), une boîte .sdc-scroll-container de 100% × 280px en overflow-y: auto et scroll-behavior: smooth, un plateau .sb-parallax-content de 800 px en position: relative; overflow: clip, et dedans deux calques : .sb-parallax-bg, absolu en inset: -60px 0 (920 px), dégradé 135° #6366f1 → #d946ef et le mot PARALLAX centré (32 px, graisse 800) ; .sb-parallax-items (z-index: 2, padding: 200px 20px 20px, colonne flex, gap: 100px) avec trois .sb-parallax-item — padding: 16px, rayon 12 px, rgba(0,0,0,.3), backdrop-filter: blur(8px), h4 de 13,6 px, p de 11,5 px en blanc à 70 %. Mesuré : cartes de 66 px à 200, 366 et 532 px du haut du plateau, course 800 − 280 = 520 px. L'indice .sdc-scroll-hint « Scrollez ↓ » (absolu, 8 px du bas du cadre, 10,4 px, blanc à 30 %) pulse entre .3 et .7 toutes les 2 s. Champ JS vide, aucune variable du site, aucune ressource externe, aucune erreur console.
Deux animations, deux horloges. Le fond porte animation-name: sbParallaxBg (translateY(60px) → translateY(-60px), linear) avec animation-timeline: scroll() : sa progression est la position de défilement du conteneur de défilement le plus proche, ici la boîte de 280 px, et animation-range: normal étale les 120 px sur toute la course. Mesuré par crans de 130 px dans Chromium 151 : 60, 30, 0, −30, −60 px ; le débord de 60 px du calque garde la boîte couverte d'un bout à l'autre. Chaque carte porte animation-name: sbFadeUp (vers opacity: 1; transform: translateY(0)) avec animation-timeline: view() et animation-range: entry entry 50% : l'horloge est la traversée de la carte dans la fenêtre de la boîte, de « son bord haut touche le bas de la boîte » à « la moitié est entrée », soit 33 px de défilement. animation-fill-mode: both la tient à opacity: 0; translateY(30px) avant la plage et à 1 / 0 après. Mesuré : la carte 1 est déjà entrée au repos (sa plage tombe entre −80 et −47 px), la carte 2 se révèle entre 86 et 119 px (opacité 0 à 0, 1 à 130), la carte 3 entre 252 et 285 px (0,24 et translateY(22,7px) à 260, 1 à 390).
La ligne qui fait tenir l'ensemble est overflow: clip sur le plateau. Avec overflow: hidden, le plateau devient lui-même un conteneur de défilement — sans course, ses 800 px étant pleins — et c'est lui que scroll() et view() choisissent : mesuré, timelines inactives, transform: none sur le fond de 0 à 520 px et cartes figées à l'opacité 1 dès le repos. clip rogne pareil sans créer de conteneur : les deux horloges remontent à la boîte. Le sens vient des keyframes : le fond remonte de 120 px de plus que les cartes sur la course, il file 1,23 fois plus vite qu'elles — l'inverse du parallaxe classique, où l'arrière-plan traîne. Le mot PARALLAX traverse la boîte entre 115 et 405 px de défilement et passe derrière la carte 2 vers 260 px, flouté par le backdrop-filter. Aucun id, aucun script : plusieurs copies cohabitent sur une page, chacune rattachée à sa boîte.
Accessibilité
- prefers-reduced-motion absent du code : mesuré sous émulation dans Chromium, rien ne change (fond 60 → −60 px, cartes en fondu, indice
running,scroll-behavior: smooth). Un fond qui bouge à une autre vitesse que le texte est le mouvement visé par WCAG 2.3.3. Ajoutez@media (prefers-reduced-motion: reduce) { .sb-parallax-bg, .sb-parallax-item { animation: none } .sb-parallax-item { opacity: 1; transform: none } .sdc-scroll-hint { animation: none } .sdc-scroll-container { scroll-behavior: auto } }. Rien n'est caché pour autant : une carte n'est à l'opacité 0 que sous le bord bas de la boîte et pendant ses 33 premiers pixels d'entrée. - Clavier : mesuré dans Chromium 151, Tab donne le focus à la boîte sans
tabindex, flèche bas avance de 40 px (fond à 50,8 px), Page suivante de 285 px (les trois cartes révélées), Fin va à 520 ; Firefox 153 focalise aussi la boîte au Tab. Pour Safari, ajouteztabindex="0", un:focus-visiblevisible et unaria-label. Au doigt, le geste doit commencer dans la boîte ;overscroll-behavior: containévite d'entraîner la page en bout de course. - Contraste (calculé aux deux bouts du dégradé, carte = 30 % de noir par-dessus) : titres blancs de 13,6 px à 7,7:1 sur le bleu et 6,3:1 sur le rose ; paragraphe en blanc à 70 % (11,5 px) à 4,7:1 sur le bleu mais 3,9:1 sur le rose, sous 4,5:1 — passez-le à 85 % (5,0:1) ou foncez la carte à
rgba(0,0,0,.45)(5,1:1). Le mot PARALLAX (32 px, graisse 800, seuil 3:1) vaut 4,5:1 sur le bleu, 3,5:1 sur le rose. L'indice à 30 % oscille entre 1,2:1 et 1,8:1 : décoratif, posezaria-hidden="true". - Lecteurs d'écran et structure : trois
divavec chacun unh4— un niveau 4 sans h2/h3 au-dessus casse le plan de la page, prenez le niveau qui suit votre titre courant. L'opacité 0 ne retire rien de l'arbre d'accessibilité : les trois cartes sont lues quelle que soit la position de défilement. Le mot PARALLAX est lu tel quel (décoratif :aria-hidden="true") et « Scrollez ↓ » est en dur en français. Reste du catalogue : unstyle="font-family: Inter, …"en ligne sur chaqueh4. Pas de JavaScript, donc rien ne change sans lui ; sansanimation-timeline, tout s'affiche à plat (voir compatibilité).
Compatibilité navigateur
CSS seul : animation-timeline: scroll() et view(), animation-range (Scroll-driven Animations niveau 1), overflow: clip, backdrop-filter, inset, dégradé, @keyframes. Zéro JavaScript, zéro dépendance. Les timelines de défilement existent dans Chrome et Edge 115+, Safari et iOS 26 (mesuré dans WebKit 26.5 : 60 → 0 → −60 px, carte 3 à 0,24 à 260 px, comme Chromium) ; Firefox : aucune version. Mesuré dans Firefox 153 : CSS.supports('animation-timeline: scroll()') répond faux, la déclaration est ignorée et les deux animations tombent à 0 s — le fond reste à transform: none (fill-mode: none), les cartes prennent leur dernière image (opacity: 1, translateY(0), fill-mode: both) : tout est visible, à plat, la boîte défile normalement, l'indice pulse. Aucun repli @supports dans le code : rien à rattraper, l'état final des keyframes est l'état lisible.
Sans animation-timeline (Firefox, Safari et iOS avant 26, Chrome avant 115) : fond immobile, cartes à l'opacité 1 dès le chargement, défilement ordinaire — seul le mouvement manque. Sans overflow: clip (Safari avant 16) : le calque déborde de 60 px sous le plateau, la boîte défile de 580 px au lieu de 520, rien d'autre. Sans backdrop-filter : panneaux noirs à 30 % sans flou, texte lisible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="sdc-scroll-container">
<div class="sb-parallax-content">
<div class="sb-parallax-bg">
<div class="sb-parallax-text">…</div>
</div>
<div class="sb-parallax-items">
<div class="sb-parallax-item">
<h4>…</h4>
<p>…</p>
</div>
<div class="sb-parallax-item">
<h4>…</h4>
<p>…</p>
</div>
<div class="sb-parallax-item">
<h4>…</h4>
<p>…</p>
</div>
</div>
</div>
</div>
<span class="sdc-scroll-hint">…</span>
</div>Le code complet HTML + CSS + JS de Parallax, prêt à coller — et les 811 effets. Ou 299 € une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Amplitude du fond (CSS — @keyframes sbParallaxBg et .sb-parallax-bg { inset: -60px 0 }) |
60 → −60 px (120 px sur 520 de course) | Le débord du calque suit l'amplitude : ±100 px demandent inset: -100px 0, sinon le fond du cadre apparaît en bande de 40 px en haut au repos et en bas en fin de course. À 0 → 0, seules les cartes s'animent. |
Sens du parallaxe (CSS — @keyframes sbParallaxBg) |
le fond file 1,23 fois plus vite que les cartes | Inversez les deux valeurs (translateY(-60px) → translateY(60px)) pour que le fond traîne derrière le contenu (0,77 fois sa vitesse), lecture classique de la profondeur ; le débord de 60 px sert alors dans l'autre sens. |
Course (CSS — .sb-parallax-content { height: 800px }, .sdc-scroll-container { height: 280px }) |
520 px | animation-range: normal étale les 120 px du fond sur toute la course : un plateau de 1 500 px (1 220 de course) ralentit le fond d'autant. Les cartes se règlent par leur position (padding-top: 200px, gap: 100px) : à moins de 280 px du haut, une carte est visible au repos, comme la première. |
Plage de révélation (CSS — .sb-parallax-item { animation-range: entry entry 50% }) |
entry → entry 50 % (33 px pour une carte de 66 px) | entry 0% entry 100% étale le fondu sur toute la hauteur de la carte ; entry 20% entry 80% la laisse franchir le bord avant de commencer ; cover 0% cover 30% ancre la fin à 30 % de sa traversée. La plage étant en pourcentage de la carte, une carte plus haute l'allonge d'autant. |
État de départ des cartes (CSS — .sb-parallax-item { opacity: 0; transform: translateY(30px) }) |
30 px plus bas, invisible | La keyframe sbFadeUp n'a qu'un to : le départ est le style de base de la carte. translateY(60px) scale(.96) pour une entrée plus marquée, opacity: .4 pour une carte lisible avant son entrée, ou retirez le transform pour un fondu pur. |
Matière des cartes (CSS — background: rgba(0,0,0,.3), backdrop-filter: blur(8px)) |
noir à 30 %, flou 8 px | Le flou lit ce qui passe derrière (le dégradé, le mot PARALLAX) : sur une photo, blur(14px) ; en clair, rgba(255,255,255,.18) avec un texte sombre. Foncer à .45 remonte le paragraphe à 70 % au-dessus de 4,5:1 sur tout le dégradé. |
Dégradé et mot (CSS — .sb-parallax-bg { background }, .sb-parallax-text) |
135° #6366f1 → #d946ef, PARALLAX 32 px | Tout ce qui est posé sur .sb-parallax-bg glisse avec lui, fonds multiples compris (lignes en repeating-linear-gradient, halo radial) : le moyen le plus visible de faire lire le parallaxe. Le mot devient un filigrane en baissant sa couleur (rgba(255,255,255,.15)) ; posez-lui aria-hidden="true". |
Indice et lissage (CSS — .sdc-scroll-hint, .sdc-scroll-container { scroll-behavior: smooth }) |
« Scrollez ↓ » pulsant 2 s, défilement doux | L'indice est un reste du catalogue : français en dur, absolu par rapport à .demo-preview (sans ce cadre il tombe au bas de la page) — supprimez le span, la keyframe sdcHintPulse part avec lui. Le smooth ne lisse que les défilements programmés (ancres, scrollTo), pas la molette. |
FAQ
animation-timeline dans aucune version, Chrome l'a depuis 115, Safari depuis 26 — ailleurs l'effet s'affiche à plat, fond fixe et cartes visibles. Le plateau : si .sb-parallax-content repasse en overflow: hidden, ou si un élément en overflow: hidden ou auto s'intercale entre les calques et la boîte, ce bloc plein devient le conteneur que scroll() et view() choisissent, sans course : mesuré, transform: none et cartes figées à l'opacité 1. Gardez overflow: clip. La boîte enfin doit rester moins haute que son contenu, sinon rien ne défile. Un wrapper en overflow: hidden autour du cadre ne gêne pas : la boîte est plus proche.overflow-y) et le cadre .demo-preview : le conteneur le plus proche devient la page, scroll() suit toute sa hauteur et view() la fenêtre du navigateur — les cartes se révèlent en entrant par le bas de l'écran. Deux précautions : un ancêtre en overflow: hidden (un .wrapper anti-débordement horizontal) capterait les deux timelines — passez-le en overflow: clip, ou écrivez animation-timeline: scroll(root) pour le fond ; et le calque de fond, absolu dans un plateau de 800 px, doit prendre la hauteur de la section qu'il habille, ou passer en position: fixed.scroll() avec leurs keyframes — un halo en scale(1) → scale(1.3), des formes et des anneaux qui montent de 60 à 100 px en tournant de quelques degrés, des points, un titre qui passe de .7 à 1 d'opacité. Cinq vitesses, aucun view(), rien à lire : ses calques sont décoratifs, le titre est son seul texte. fx-0538 n'a qu'un calque de fond mais porte une colonne de contenu : trois cartes en backdrop-filter, chacune révélée par view() quand elle entre dans la boîte, indépendamment du fond. fx-0592 pour un décor de section ; fx-0538 dès que des cartes — tarifs, formules, consignes — doivent rester lisibles sur un fond en mouvement.
