Parallax Slider
Carrousel à profondeur : pendant que la piste glisse, le fond de chaque diapositive se décale à contre-sens et avance moins vite que le titre posé dessus.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque diapositive .pxsl-slide contient deux couches : un fond .pxsl-bg plus large qu'elle (160 %, débordant de 30 % de chaque côté) et un titre .pxsl-caption au premier plan. Au changement, la piste glisse de 100 % comme un carrousel ordinaire, et le script décale en plus chaque fond de 30 % de sa propre largeur par rang d'écart avec l'image visible, dans le sens opposé.
Résultat : le titre traverse le cadre à pleine vitesse tandis que le paysage derrière lui ne parcourt qu'environ la moitié du chemin. C'est ce décalage de vitesse qui crée l'impression de relief. Le fond a sa propre transition (0,6 s) un peu plus longue que celle de la piste (0,5 s), ce qui accentue le retard. La valeur 30 se règle par l'attribut data-depth du cadre.
La parallaxe ne se voit que si le fond a des formes : un aplat ou un dégradé presque uni glisse sans qu'on le remarque. Les fonds de démonstration ont donc un disque clair et des bandes obliques. Avec vos photos, posez une <img class="pxsl-bg"> (recadrée en object-fit: cover) ou une <div class="pxsl-bg"> avec background-image ; un paysage avec des reliefs ou un horizon donne le meilleur rendu.
Commandes : flèches ‹ ›, touches ← → quand le focus est dans le cadre, glisser horizontal de plus de 50 px (Pointer Events). Après la dernière vue, retour à la première. Chaque .pxsl-carousel est indépendant, rien n'est posé sur window, et un second passage du script est sans effet (data-pxsl-ready).
Accessibilité
- Fonds décoratifs : la couche
.pxsl-bgn'est qu'un décor ; une<img>de fond prendalt="", et l'information va dans la légende ou le texte de la diapositive. - Rôles :
role="region"etaria-roledescription="carrousel"sur le cadre, groupes « diapositive » nommés « 2 sur 3 », diapositives cachées eninert+aria-hidden. - Annonce et commandes : zone
aria-live="polite"invisible après chaque changement ; flèches en vrais boutons nommés, anneau de focus blanc, touches ← →. - Mouvement réduit : sous
prefers-reduced-motion: reduce, ni glissement ni décalage du fond : la vue change d'un coup. La profondeur disparaît, la navigation reste. - Lisibilité : le titre blanc porte une ombre portée ; sur un fond clair, ajoutez un voile sombre sous la légende pour garder le contraste.
Compatibilité navigateur
Environ 4 Ko de JavaScript. Mesures Playwright du 08/11/2026 dans Chromium, Firefox et WebKit : deux carrousels indépendants, script exécuté deux fois sans effet, Tab, Entrée et →, glisser au doigt (Chromium, 390 px) et à la souris, décalage des fonds relevé à mi-transition, mouvement réduit sans erreur. Planchers tirés de @mdn/browser-compat-data 8.1.8 ; inert les fixe.
Sans inert, tout fonctionne mais un lien d'une vue cachée reste atteignable au clavier. Sans aspect-ratio (Safari 14), réglez --pxsl-height. Sans JavaScript, la première vue s'affiche avec son fond, sans navigation.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0169-root">
<div class="pxsl-carousel" role="region" aria-roledescription="carrousel" aria-label="Diaporama" data-slide="diapositive" data-of="sur">
<div class="pxsl-track">
<div class="pxsl-slide"><div class="pxsl-bg pxsl-bg-1"></div><span class="pxsl-caption">Parallax 1</span></div>
<div class="pxsl-slide"><div class="pxsl-bg pxsl-bg-2"></div><span class="pxsl-caption">Parallax 2</span></div>
<div class="pxsl-slide"><div class="pxsl-bg pxsl-bg-3"></div><span class="pxsl-caption">Parallax 3</span></div>
<!-- une div.pxsl-slide par vue ; votre photo : <img class="pxsl-bg" src="…" alt=""> à la place du div de fond -->
<!-- profondeur : data-depth="30" (facultatif) sur .pxsl-carousel -->
</div>
<button type="button" class="pxsl-arrow pxsl-prev" aria-label="Diapositive précédente"><svg>…</svg></button>
<button type="button" class="pxsl-arrow pxsl-next" aria-label="Diapositive suivante"><svg>…</svg></button>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Profondeur (HTML — data-depth sur .pxsl-carousel) |
30 | Décalage du fond, en % de sa largeur, par diapositive d'écart. 15 pour un effet discret, 40 pour un relief marqué ; au-delà, le bord du fond peut apparaître. |
Débordement du fond (CSS — inset et taille de .pxsl-bg) |
-30 % · 160 % | Si vous augmentez la profondeur, agrandissez le fond d'autant pour qu'il couvre toujours la diapositive. |
Durées (CSS — --pxsl-duration, --pxsl-bg-duration) |
0.5s · 0.6s | Un fond plus lent que la piste renforce l'impression de profondeur. |
Taille (CSS — --pxsl-width, --pxsl-ratio, --pxsl-height) |
640px · 16 / 10 · auto | Largeur maximale, format et hauteur imposée éventuelle. |
Flèches et arrondi (CSS — --pxsl-arrow-bg, --pxsl-radius) |
blanc à 20 % · 1rem | Foncez les flèches sur les ciels clairs. |
Fonds de démonstration (CSS — .pxsl-bg-1 à .pxsl-bg-3) |
dégradés avec disque et bandes | À supprimer dès que vous posez vos images. |
Textes lus (HTML — data-slide, data-of, aria-label) |
diapositive · sur · Diaporama | « étape 2 sur 3 », « chapitre 1 sur 3 »… |
FAQ
data-depth à 40, ou allongez --pxsl-bg-duration.
