Gradient Fade
Des mots en dégradé indigo-magenta glissent vers la gauche et s'effacent en douceur aux deux bords, sur n'importe quel fond, clair comme sombre.
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
Le fondu des bords est un masque posé sur .gfmq-viewport : mask-image rend la bande transparente sur les 100 premiers et les 100 derniers pixels (--gfmq-fade). C'est la page derrière qui apparaît, quelle qu'elle soit. L'ancienne version peignait deux voiles de la couleur #0a0a0f par-dessus le texte ; sur un fond blanc ou une photo, ils formaient deux rectangles sombres.
Le dégradé est peint dans les lettres avec background-clip: text, sur chaque liste : il part de --gfmq-color au début de la liste et arrive à --gfmq-to à sa fin. Comme le script recopie la liste entière, chaque double porte exactement le même dégradé et le passage d'un double à l'autre ne se remarque pas.
Le nombre de doubles est calculé d'après la largeur réelle de la bande, ce qui supprime le vide qui s'ouvrait à droite au-delà de 1 000 px environ. Le défilement avance à 65 px par seconde (data-speed), s'arrête sous la souris et se fige avec le bouton Pause placé au bout de la bande, hors du fondu.
Accessibilité
- Arrêt du mouvement : survol de la bande, ou bouton Pause (
aria-pressed) utilisable au clic, au doigt et au clavier — le mouvement dure plus de 5 secondes, WCAG 2.2.2 l'exige. - Texte réel : les mots sont du texte HTML, sélectionnable et lu par les lecteurs d'écran ; seuls les doubles, marqués
aria-hidden="true", sont ignorés. Avant réparation, chaque mot était annoncé deux fois. - Lisibilité : sur #0a0a0f, l'indigo de départ atteint 4,4:1 et le magenta 5,7:1. Dans les zones fondues, le texte devient volontairement pâle : ne placez pas d'information indispensable seulement là, elle reste lisible au centre.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, la bande s'arrête sur la liste d'origine, garde son dégradé et ses bords fondus, et se fait défiler à la main ; quand elle dépasse, elle reçoit aussi le focus au clavier (Tab) et se fait défiler aux flèches. - Focus : un lien dans la bande, atteint au clavier, immobilise la bande au début et l'amène en vue ; les liens des doubles sont sautés (
tabindex="-1").
Compatibilité navigateur
Masque CSS (mask-image, avec sa forme -webkit- pour Chrome avant 120 et Safari avant 15.4), texte en dégradé (background-clip: text, avec -webkit-background-clip), animation CSS et 4,5 Ko de JavaScript commenté. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5, sur fond sombre et sur fond blanc : bords fondus sans bande sombre, aucun vide à 1 900 px, 0 erreur.
Sans masque CSS, les bords sont nets. Sans background-clip: text, les mots s'affichent en --gfmq-color uni (la couleur de texte reste déclarée). Sans JavaScript, les mots sont immobiles et défilables à la main.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0193-root" data-speed="65" data-direction="left">
<div class="gfmq-band">
<div class="gfmq-viewport">
<div class="gfmq-track">
<ul class="gfmq-group" role="list">
<li>Votre slogan</li>
<li>Deuxième message</li>
</ul>
</div>
</div>
<button type="button" class="gfmq-toggle" aria-pressed="false" aria-label="Pause"></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 |
|---|---|---|
Messages (HTML — <li> de .gfmq-group) |
4 messages | Écrits une fois ; le script ajoute les doubles. |
--gfmq-color → --gfmq-to |
#6366f1 → #d946ef | Début et fin du dégradé. Sur fond clair, prenez deux teintes foncées. |
--gfmq-fade |
100px | Largeur de chaque bord fondu. 0 pour des bords nets. |
data-speed / data-direction |
65 / left | Pixels par seconde et sens (right pour l'inverse). |
--gfmq-size / --gfmq-space |
1.5rem / 4rem | Taille des mots et écart entre deux messages. |
--gfmq-height / --gfmq-bg / --gfmq-padding |
180px / #0a0a0f / 1rem 0 | Cadre de démonstration ; auto, transparent, 0 dans une page. |
--gfmq-button / --gfmq-button-size |
rgba(255, 255, 255, .8) / 2rem | Teinte et diamètre du bouton Pause. |
FAQ
--gfmq-bg: transparent)..gfmq-viewport par un dégradé à un seul bord, par exemple linear-gradient(to right, transparent, #000 var(--gfmq-fade)) pour ne fondre que la gauche.
