Slide Transition
Poussée horizontale : le contenu A sort par la gauche pendant que B entre par la droite, les deux en translateX synchronisé sur 0,6 s, sans aucune couche entre eux ; le retour inverse le sens. CSS + 0,9 Ko de JavaScript, clic, Entrée ou Espace, état final direct si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .sld-frame (280 × 180 px, coins de 16 px, bordure blanche à 8 %) coupe ce qui dépasse (overflow: hidden). Il contient deux panneaux .sld-panel de même taille, en position: absolute; inset: 0 : A est à sa place (translateX(0)), B attend juste à droite, hors du cadre (translateX(100%)). Les deux portent transition: transform .6s cubic-bezier(.4, 0, .2, 1).
Au basculement de .active, A part à translateX(-100%) pendant que B vient à translateX(0). Ce sont les deux contenus eux-mêmes qui bougent, côte à côte, à la même vitesse : aucun calque ne vient les couvrir, rien ne masque A pendant qu'il sort. Mesuré dans Chromium 151 : 250 ms après le clic, A est à −172 px et B à +106 px, soit 278 px d'écart, la largeur intérieure du cadre (Firefox 153 : −164 et +114) ; à 1,1 s, A à −278 px et B à 0, et l'état tient trois secondes plus tard. Le second clic refait le chemin inverse : B ressort par la droite, A revient par la gauche. Même résultat dans WebKit 26.5.
Le script pose ou retire .active au clic, à Entrée ou à Espace sur chaque .sld-frame de la page, tient aria-pressed à jour et passe aria-hidden au panneau sorti. Tout est préfixé sld-, sans nom global : plusieurs cadres cohabitent dans la page, chacun avec son état. Le sens est fixé par le CSS ; pour une navigation à plusieurs écrans, la FAQ montre comment choisir le sens selon que l'on avance ou recule.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition est retirée et le panneau atteint est en place sans délai (relevé à 60 ms, Chromium comme Firefox : B déjà à 0, A à −278 px). Un glissement de toute la largeur est un mouvement ample ; c'est lui qu'on supprime. - Clavier et lecteurs d'écran : le cadre porte
role="button",tabindex="0"etaria-pressed; Entrée et Espace basculent comme un clic (mesuré). Le panneau hors du cadre reçoitaria-hidden="true", son texte n'est donc pas lu. Contour de 2 px au focus clavier. - Dans une vraie navigation, déplacez le focus vers le titre du panneau qui arrive et annoncez l'étape (« Étape 2 sur 4 ») : le glissement seul ne dit rien à quelqu'un qui n'a pas vu l'écran bouger.
- Sens de lecture : en arabe ou en hébreu (
dir="rtl"), inversez les deux valeurs pour que « suivant » arrive par la gauche.
Compatibilité navigateur
CSS (transform: translateX(), transition, inset) + 0,9 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : poussée dans les deux sens, état B tenu, retour au second clic ; clavier et mouvement réduit mesurés dans Chromium et Firefox. Seule l'animation de transform est en jeu : le navigateur la confie au compositeur, sans recalcul de mise en page. inset fixe le plancher (Chrome 87, Firefox 66, Safari 14.1).
Sans JavaScript, le panneau A reste affiché. Sans inset, écrivez top: 0; right: 0; bottom: 0; left: 0 sur .sld-panel.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="sld-stage">
<div class="sld-frame" role="button" tabindex="0" aria-pressed="false">
<div class="sld-panel sld-panel-a">…</div>
<div class="sld-panel sld-panel-b" aria-hidden="true">…</div>
</div>
<span class="sld-hint">…</span>
</div>Le code complet HTML + CSS + JS de Slide Transition, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Durée et courbe (CSS — transition de .sld-panel) |
0,6 s, cubic-bezier(.4, 0, .2, 1) |
0,35 s pour un carrousel vif ; cubic-bezier(.2, .8, .2, 1) donne un départ rapide et une arrivée freinée, proche d'un geste du doigt. |
Axe (CSS — translateX) |
horizontal | Remplacez par translateY(100%) / translateY(-100%) pour une poussée verticale, par exemple un fil de messages. |
Écart entre les panneaux (CSS — valeurs 100%) |
les panneaux se touchent | translateX(calc(100% + 16px)) pour B et calc(-100% - 16px) pour A laissent une bande de fond visible pendant le passage, comme des cartes séparées. |
Taille du cadre (CSS — .sld-frame) |
280 × 180 px | width: 100%; height: 420px pour un écran complet : les pourcentages de translateX suivent la largeur, rien d'autre à changer. |
Couleurs des panneaux (CSS — .sld-panel-a, -b) |
dégradés bleu ciel et vert | Mettez le fond de votre écran ; gardez un fond opaque, sinon on voit l'autre panneau à travers pendant le glissement. |
FAQ
translateX(-100%) pour les écrans passés, 0 pour l'écran courant, 100% pour les écrans à venir. En avançant, l'écran courant passe à gauche et le suivant arrive de droite ; en reculant, l'inverse. Le JavaScript change seulement les classes de position.overflow: hidden et masqué aux lecteurs d'écran par aria-hidden. Si un panneau contient des champs de formulaire, ajoutez aussi inert au panneau sorti pour que la touche Tab ne s'y arrête pas.transform, que le navigateur anime hors du fil principal : pas de recalcul de mise en page à chaque image. Évitez d'animer left ou margin-left à la place, qui recalculent la page, et gardez des ombres légères dans les panneaux.
