Wave Distortion
Les lettres d'un texte montent, penchent, redescendent et penchent de l'autre côté l'une après l'autre : une houle lente, de 3 secondes par vague, qui traverse le mot de gauche à droite.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Vous écrivez le texte dans .wvd-text. Au chargement, le script le recopie dans un .wvd-sr réservé aux lecteurs d'écran, puis remplace l'affichage par des .wvd-letter regroupées par mot dans des .wvd-word, le tout sous aria-hidden="true". Chaque lettre porte son numéro d'ordre dans la variable --wvd-i. Toutes les racines .fx-0255-root de la page sont traitées, chacune avec son propre texte.
L'animation wvdWave dure 3 s : au quart, la lettre est montée de 0,125 em et penchée de −5° ; aux trois quarts, elle est descendue d'autant et penchée de +5° ; elle finit droite, à sa place. Chaque lettre démarre 0,15 s après la précédente : avec les 10 lettres de DISTORTION, la dernière part 1,35 s après la première et la vague balaie le mot de gauche à droite.
Tout est réglé par variables sur la racine : taille (--wvd-size, 2.5rem), couleur (--wvd-color, blanc), hauteur de la houle (--wvd-rise, en em pour suivre la taille), inclinaison (--wvd-skew), durée et décalage. Le bloc garde un overflow: hidden : une houle trop haute pour l'interligne est rognée, augmentez alors line-height ou ajoutez un peu de marge intérieure.
La racine occupe toute la largeur, au moins 300 px de haut sur fond #0a0a0f. Avec --wvd-height: auto, --wvd-bg: transparent et width: auto, elle se glisse dans un titre, un widget ou un bouton.
Accessibilité
- Lecteurs d'écran : le texte de
.wvd-srest annoncé normalement, les lettres découpées sont ignorées. Mesuré dans Chromium, Firefox et WebKit : « D I S T O R T I O N » épelé avant réparation, « DISTORTION » après. - Mouvement réduit : avec
prefers-reduced-motion: reduce, les lettres ne bougent plus et restent droites ; le texte est entier et lisible. - Lisibilité : l'inclinaison de ±5° et la houle de 0,125 em laissent le mot lisible à toutes les tailles testées (12 à 80 px). Sur un libellé de bouton de 12 px, montez
--wvd-riseà 0.2em pour que le mouvement se voie. - Clignotement : aucun ; la couleur ne change jamais, seule la position bouge (mesure image par image : 0 case au-dessus du seuil).
- Rôle : l'effet ne rend rien cliquable. Posé dans un
<button>ou un<h1>, il garde la sémantique de l'élément qui l'accueille.
Compatibilité navigateur
CSS (1,9 Ko) et 1 Ko de JavaScript sans dépendance : variables CSS, calc() dans les images clés et le délai, skewX(), Array.from. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : rendu identique au pixel à l'ancienne version à 0, 40, 75 et 500 ms ; deux copies avec deux textes différents découpées chacune correctement ; 0 erreur.
Si le script ne s'exécute pas, le texte reste affiché d'un seul tenant, dans la couleur choisie, sans houle. Sans variables CSS, le texte s'affiche avec les styles hérités, immobile.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0255-root">
<div class="wvd-text">Votre texte</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 |
|---|---|---|
Texte (HTML — contenu de .wvd-text) |
DISTORTION | Le texte affiché et lu ; il peut contenir des espaces, des accents et des chiffres. |
--wvd-size · --wvd-color |
2.5rem · #fff | Taille et couleur des lettres. |
--wvd-rise |
.125em | Hauteur de la houle, vers le haut puis vers le bas (5 px à 2.5rem). 0.2em sur un petit libellé. |
--wvd-skew |
5deg | Inclinaison des lettres en haut et en bas de la vague. 0deg pour une houle sans bascule. |
--wvd-speed · --wvd-delay |
3s · .15s | Durée d'une vague et écart entre deux lettres. Un écart plus court (0.08s) donne une vague plus serrée sur un long texte. |
--wvd-bg · --wvd-height |
#0a0a0f · 300px | Fond et hauteur minimale de la racine ; transparent et auto pour l'intégrer. |
FAQ
.wvd-sr. Pour la copie à la souris, la sélection prend les lettres visibles ; la copie réservée aux lecteurs d'écran porte user-select: none et n'est pas collée en double. Mesuré dans les trois moteurs : le texte collé est exact, espaces compris..wvd-text a overflow: hidden, comme le code d'origine. Si la houle dépasse l'interligne (grande valeur de --wvd-rise, line-height serré), ajoutez quelques pixels de padding vertical à .wvd-text, comme dans les exemples.hidden), à côté du libellé normal : le script la découpe au chargement. Au moment de l'action, échangez les deux avec hidden, puis revenez au libellé normal à la fin, comme le bouton de la messagerie.
