Wipe Transition
Le nouveau thème recouvre l'ancien de gauche à droite en 0,6 s, découpé par clip-path: inset(), et un trait lumineux de 3 px suit la frontière au pixel près : on voit l'avant et l'après en même temps, et où passe la limite. Un second geste fait repartir le front vers la gauche ; fondu de 150 ms 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
La scène .th-wipe-scene (300 × 220 px, coins de 16 px, overflow: hidden) superpose deux calques de sa taille exacte, en position: absolute; inset: 0 : .th-wipe-dark (fond #0c0a09) dessous, .th-wipe-light (fond #fff7ed) dessus, chacun avec sa version du titre, de la phrase et des pastilles, centrés en colonne. Au repos, le calque clair est rogné à droite sur toute sa largeur : clip-path: inset(0 100% 0 0). La classe .active le ramène à inset(0) avec transition: clip-path .6s cubic-bezier(.4, 0, .2, 1) : sa partie visible s'étend du bord gauche jusqu'au bord droit, sans que rien ne glisse — le texte reste immobile, seule la limite avance.
Le trait est un troisième calque, .th-wipe-line, de la largeur de la scène et sans réaction au pointeur (pointer-events: none), dont le pseudo-élément ::before dessine sur son bord gauche une barre de 3 px en dégradé violet-rose avec un halo de 12 px. Il passe de translateX(0) à translateX(100%) — 100 % de sa propre largeur, donc de la scène — avec la même durée et la même courbe que le découpage. Le déplacement passe par transform, que le navigateur anime sans recalculer la mise en page. Mesuré toutes les 80 ms : front et trait à la même position au dixième de pixel dans Chromium 151 et Firefox 153 (192,2 / 192,2 px à 240 ms) ; dans WebKit 26, le trait devance le front de 1 à 11 px en milieu de course.
Le script (0,6 Ko) arme chaque .th-wipe-scene déclarée role="button" : clic, Entrée et Espace basculent .active et mettent aria-pressed à jour. Retirer la classe rejoue tout à l'envers : le front repart vers la gauche avec son trait (mesuré 67 px dans Chromium, 91 px dans Firefox 300 ms après le second clic). Une scène sans role="button" n'est pas armée : c'est la façon prévue de piloter la bascule depuis votre propre interrupteur, comme dans les exemples ci-dessous. Au repos, le trait reste visible le long du bord gauche ; une fois la bascule faite, il sort à droite, masqué par la scène. L'effet ne lit pas prefers-color-scheme et ne mémorise rien : c'est vous qui décidez de l'état de départ.
Accessibilité
- Clavier et rôle : la scène de démonstration est un
role="button"focalisable (tabindex="0"), nommé « Thème clair », avecaria-pressed. Mesuré : atteinte à la touche Tab dans Chromium et WebKit, basculée par Entrée et par Espace dans les trois moteurs ; contour violet de 2 px au focus clavier. Dans une vraie interface, préférez un<button>visible qui pilote la scène (voir les exemples) : un panneau entier cliquable se devine mal. - Contenu en double : les deux calques portent le même texte et le calque clair est marqué
aria-hidden. Sur la démo, le nom du bouton couvre la lecture ; si vous pilotez la scène depuis un bouton séparé, alternezaria-hiddenentre les deux calques à chaque bascule, comme le font les exemples. - Mouvement réduit : sous
prefers-reduced-motion: reduce, ni balayage ni trait (masqué) ; le calque clair arrive en fondu d'opacité de 150 ms. Mesuré : opacité 0,39 (Chromium) et 0,22 (Firefox) 60 ms après le clic, 1 à 300 ms. - Contraste : sur le clair, la phrase est en
#78716c(4,5:1 sur#fff7ed) et les pastilles à 4,0:1 ; sur le sombre, phrase à 5,3:1. Le trait lumineux n'est qu'un repère visuel : aucune information ne passe par sa seule couleur.
Compatibilité navigateur
CSS (clip-path: inset() animé, transform, pseudo-élément, :focus-visible) + 0,6 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : calques superposés, même aller-retour, mêmes touches ; synchronisation trait/front exacte dans Chromium et Firefox, écart de 1 à 11 px dans WebKit. clip-path avec inset() et transition existe sans préfixe depuis Chrome 55, Firefox 54 et Safari 12.1. Le plancher vient de inset: 0, qui superpose les calques : Chrome et Edge 87, Firefox 66, Safari 14.1 (iOS 14.5).
Sans clip-path, le calque clair n'est jamais rogné : la scène reste claire et seul le trait traverse. Sans JavaScript, la scène reste sombre et ne réagit pas ; poser active dans le HTML sert directement le clair.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="th-wipe-root">
<div class="th-wipe-scene" role="button" tabindex="0" aria-pressed="false" aria-label="Thème clair">
<div class="th-wipe-dark">
<h3>…</h3><p>…</p>
<div class="th-wipe-chips">…</div>
</div>
<div class="th-wipe-light" aria-hidden="true">
<h3>…</h3><p>…</p>
<div class="th-wipe-chips">…</div>
</div>
<div class="th-wipe-line" aria-hidden="true"></div>
</div>
</div>Le code complet HTML + CSS + JS de Wipe 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 .th-wipe-light et de .th-wipe-line) |
.6s cubic-bezier(.4, 0, .2, 1) | Changez les deux valeurs ensemble, sinon le trait se détache du front. 0,9 s pour une page lourde de sens, 0,4 s pour une bascule rapide. |
Sens du balayage (CSS — clip-path de repos et translateX) |
de gauche à droite : inset(0 100% 0 0) |
De droite à gauche : inset(0 0 0 100%) au repos, et le trait de translateX(100%) à translateX(0), dessiné sur le bord gauche. De haut en bas : inset(0 0 100% 0) et un trait horizontal en translateY. |
Trait (CSS — .th-wipe-line::before) |
3 px, dégradé #8b5cf6 → #ec4899, halo de 12 px |
1 px sans halo pour un rendu sobre ; 6 px pour un affichage vu de loin. Supprimer .th-wipe-line donne un balayage sans repère. |
Couleurs des deux thèmes (CSS — fonds de .th-wipe-dark / .th-wipe-light, puis titres, phrases, pastilles) |
#0c0a09 et #fff7ed |
Chaque calque a ses règles de texte ; vérifiez 4,5:1 sur la phrase secondaire de chacun. |
Déclencheur (HTML — role="button" sur la scène) |
la scène entière est le bouton | Retirez role, tabindex et aria-pressed de la scène, et basculez .active depuis votre propre bouton : le script ne touche plus la scène. |
Mouvement réduit (CSS — bloc @media (prefers-reduced-motion: reduce)) |
fondu de 150 ms, trait masqué | transition: none pour un changement instantané. |
FAQ
translateX en pourcentage se rapporte à la largeur de l'élément lui-même : une barre de 3 px ne pourrait avancer que de 3 px pour 100 %. Un calque aussi large que la scène, qui dessine la barre sur son bord gauche, avance exactement de la largeur de la scène, quelle qu'elle soit, et suit le front sans pixel codé en dur. Animer left donnerait le même tracé, mais en recalculant la mise en page à chaque image.aria-pressed="false" : l'état suit toujours le dernier clic. Si vous préférez ignorer les clics pendant le balayage, attendez l'évènement transitionend du calque clair avant d'accepter le suivant.
