Lens Marquee
Des rangées de mots en contour défilent ; une lentille ronde qui suit la souris ou le doigt révèle dessous la même phrase en dégradé coloré.
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
Vous écrivez vos mots une seule fois, dans la couche contour .lmq-outline-layer : une .lmq-row-wrap par rangée, des .lmq-item--a et des séparateurs .lmq-sep--a. Au démarrage, le script recopie chaque rangée dans .lmq-fill-layer en changeant les classes en --b (texte rempli d'un dégradé violet → rose → orange → jaune), puis ajoute dans les deux couches les copies nécessaires pour couvrir la largeur.
Les deux couches avancent ensemble à 36 px/s, la 1re et la 3e rangée vers la gauche, la 2e vers la droite. La couche dégradée est découpée par un masque radial-gradient de 90 px de rayon centré sur --lmq-x / --lmq-y : la couleur n'apparaît que dans ce cercle, entouré d'un anneau lumineux .lmq-ring. La lentille rejoint le pointeur (souris, stylet ou doigt) avec un léger retard ; sans pointeur, elle balaie seule la scène sur une lente boucle.
Survoler la scène à la souris ou y placer le focus met les rangées en pause, la lentille suit toujours le curseur. Le bouton Pause arrête les rangées et le balayage automatique. Chaque racine .fx-0835-root est indépendante, se reconstruit quand sa largeur change et s'arrête hors de l'écran.
Accessibilité
- Texte réel : vos mots de la couche contour sont lus une seule fois ; la couche dégradée et les copies de boucle portent
aria-hidden="true"(liens entabindex="-1"). La scène est une région nommée pararia-label. - Pause : survol et focus clavier arrêtent les rangées ; le bouton Pause (
aria-pressed) les fige avec le balayage (WCAG 2.2.2). - Mouvement réduit : sous
prefers-reduced-motion: reduce, ni copies ni défilement : chaque rangée se fait défiler à la main (doigt, molette, clavier) et la couche colorée suit la même position. La lentille ne balaie plus seule ; elle se place directement sous le pointeur, sans retard. Le bouton Pause est masqué. - Toucher :
touch-action: pan-ylaisse la page défiler quand le doigt va vers le haut ou le bas ; un appui ou un glisser horizontal place la lentille sous le doigt.
Compatibilité navigateur
mask-image avec dégradé radial et variables CSS (préfixe -webkit- inclus), background-clip: text, Pointer Events, IntersectionObserver et ResizeObserver (testés avant usage). Mesuré le 08/11/2026 dans Chromium, Firefox et le WebKit de Playwright : 36 px/s, pause au survol, au focus et au bouton, deux copies indépendantes, lentille immobile sous mouvement réduit, page qui défile au doigt à 390 px.
Sans masque CSS, la couche dégradée reste visible partout (pas de lentille, mais texte en couleur). Sans JavaScript, seule la couche contour s'affiche, immobile.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0835-root" data-lmq-speed="36" data-lmq-radius="90">
<div class="lmq-stage" role="region" aria-label="…">
<div class="lmq-outline-layer">
<div class="lmq-row-wrap">
<div class="lmq-track">
<span class="lmq-item--a">…</span><span class="lmq-sep--a" aria-hidden="true">·</span>
</div>
</div>
<!-- 2 autres .lmq-row-wrap -->
</div>
<div class="lmq-fill-layer" aria-hidden="true"></div>
<div class="lmq-ring" aria-hidden="true"></div>
<button class="lmq-pause-btn" type="button" aria-label="…" aria-pressed="false">⏸</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 |
|---|---|---|
Mots (HTML — .lmq-item--a dans chaque .lmq-track de la couche contour) |
3 rangées de 5 mots | Écrivez-les une seule fois : la couche dégradée est recopiée par le script. Liens possibles (<a class="lmq-item--a">). |
Vitesse (HTML — data-lmq-speed sur .fx-0835-root) |
36 (px/s) | De 0 à 600 ; sens alternés gauche, droite, gauche. |
Rayon de la lentille (HTML — data-lmq-radius) |
90 (px) | De 20 à 400 ; l'anneau .lmq-ring prend la même taille. |
Dégradé révélé (CSS — background de .lmq-item--b) |
#a855f7 → #ec4899 → #f97316 → #eab308 | N'importe quel dégradé ou une couleur unie (garder background-clip: text). |
Contour (CSS — -webkit-text-stroke de .lmq-item--a) |
1,5 px rgba(255,255,255,.42) | Plus discret pour un fond, plus marqué pour un titre. |
Taille (CSS — font-size des items, height de .lmq-row-wrap) |
clamp(26px, 4.5vw, 50px) ; 78 px (60 px sous 520 px) | Réglez les deux ensemble pour garder les rangées alignées. |
Anneau (CSS — .lmq-ring) |
Bordure violette et halo | Changez border et box-shadow, ou masquez-le pour une lentille sans bord. |
FAQ
.lmq-fill-layer au démarrage. Laissez .lmq-fill-layer vide dans votre HTML.position: absolute avec un z-index supérieur à 10. Le contenu posé dessus reçoit les clics à la place de la scène : sous ce contenu, la lentille ne suit plus la souris et continue de balayer seule.
