Text-Path Marquee
Jusqu'à trois lignes de texte SVG glissent sur des ondes qui ondulent ; le pointeur soulève une bosse sous lui et un glisser fait avancer le texte à la main.
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
La scène est un SVG de 800 × 300 unités (preserveAspectRatio="xMidYMid slice" : il remplit le cadre et rogne ce qui dépasse). Il contient jusqu'à trois chemins .tpm-path et autant de <textPath> : le script donne à chaque paire un identifiant propre à l'instance, lit votre texte dans le <textPath> et le répète jusqu'à quatre fois la longueur du chemin. Piste 1 au centre (y = 148), piste 2 en haut (72), piste 3 en bas (228).
Toutes les 33 ms, chaque chemin est recalculé en 80 segments : une sinusoïde d'amplitude 22 (×0,68 pour les pistes haute et basse) dont la phase dérive de 0,42 radian par seconde et dont l'amplitude respire de ±20 %. Le texte avance de 60 px/s le long du chemin, à des vitesses relatives de 1, 0,58 et 1,22 pour créer une parallaxe. Sous le pointeur, une bosse en cloche (32 unités de haut, largeur ≈ 104 unités) soulève les trois lignes et suit le curseur avec un léger retard.
Survoler la scène à la souris ou y placer le focus arrête le défilement et la dérive des ondes ; la bosse continue de suivre le pointeur. Glisser horizontalement (souris ou doigt) fait avancer ou reculer le texte à la main. Le bouton Pause fige tout. Chaque racine .fx-0833-root est indépendante et la boucle s'arrête hors de l'écran.
Accessibilité
- Texte réel : le SVG répété porte
aria-hidden="true"; le script recopie une fois chaque phrase différente dans.tpm-sr, un texte masqué visuellement que les lecteurs d'écran lisent. La scène a le rôlemarqueeet unaria-labelà adapter. - Pause : survol et focus clavier arrêtent le défilement ; le bouton Pause (
aria-pressed) arrête tout jusqu'au clic suivant (WCAG 2.2.2). - Mouvement réduit : sous
prefers-reduced-motion: reduce, aucune boucle ne tourne : les ondes restent figées et le bouton Pause est masqué. Le glisser horizontal reste actif pour lire la suite du texte. - Toucher :
touch-action: pan-ylaisse la page défiler au doigt ; seul un geste horizontal déplace le texte.
Compatibilité navigateur
SVG <textPath> avec l'attribut href sans préfixe, getTotalLength(), getComputedTextLength(), Pointer Events, IntersectionObserver (testé avant usage). Mesuré le 08/11/2026 dans Chromium, Firefox et le WebKit de Playwright : défilement à 60 px/s, arrêt au survol, au focus et au bouton, deux copies indépendantes, mouvement réduit, page qui défile au doigt à 390 px.
Sans JavaScript, les chemins sont vides et rien ne s'affiche dans le SVG : prévoyez un titre visible ailleurs si le texte est essentiel. Sans masque CSS, le fondu des bords devient un dégradé posé par-dessus.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0833-root" data-tpm-speed="60" data-tpm-amp="22" data-tpm-bump="32">
<div class="tpm-scene" role="marquee" aria-label="…">
<svg class="tpm-svg" viewBox="0 0 800 300" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs><path class="tpm-path" d=""/> ×3</defs>
<text class="tpm-text-solid"><textPath>…</textPath></text>
<text class="tpm-text-outline"><textPath>…</textPath></text>
<text class="tpm-text-solid tpm-text-soft"><textPath>…</textPath></text>
</svg>
<span class="tpm-sr"></span>
<div class="tpm-fade" aria-hidden="true"></div>
<button class="tpm-pause-btn" type="button" aria-pressed="false"><span class="tpm-pause-icon" aria-hidden="true">⏸</span> 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 |
|---|---|---|
Texte (HTML — contenu de chaque <textPath>) |
« EFFECT.LABS — VANILLA EFFECTS — NO FRAMEWORK — » sur les trois pistes | Une phrase par piste, terminée par un séparateur (« — », « ~ »…) pour que la répétition se lise bien. |
Nombre de pistes (HTML — paires .tpm-path / <text>) |
3 | 1, 2 ou 3. Avec une seule, gardez la piste centrale (y = 148). |
Vitesse (HTML — data-tpm-speed sur .fx-0833-root) |
60 (px/s le long du chemin) | De 0 à 600 ; les pistes haute et basse gardent leurs vitesses relatives (0,58 et 1,22). |
Amplitude (HTML — data-tpm-amp) |
22 (unités du SVG) | Hauteur des vagues, de 0 (ligne droite) à 80. |
Fréquence (HTML — data-tpm-freq) |
1,5 | Nombre de vagues sur la largeur du SVG, de 0,2 à 6. |
Bosse du pointeur (HTML — data-tpm-bump) |
32 (unités du SVG) | Hauteur de la bosse sous le curseur ; 0 la supprime. |
Couleurs et tailles (CSS — .tpm-text-solid, .tpm-text-outline, .tpm-text-soft, .tpm-fade) |
Blanc 28, contour violet 26, violet 24 ; fond #0a0a0f | fill, stroke et font-size (en unités du SVG). Donnez à .tpm-fade et au stroke du texte plein la couleur de votre fond. |
FAQ
font-size des classes de texte (58 unités donnent ≈ 17 px dans ce cas) et gardez de préférence une seule piste.<textPath> garde son propre texte et sa propre longueur de répétition. Le texte lu par les lecteurs d'écran reprend une fois chaque phrase différente.
