Moving Mask
Un halo doux qui suit la souris, le doigt ou les flèches du clavier et laisse voir, à travers un masque radial, le calque caché sous la surface.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La zone .mvm-zone contient deux couches : .mvm-front, la surface visible, et .mvm-layer, le calque caché, posé par-dessus. Ce calque n'est visible qu'à travers mask-image: radial-gradient(circle var(--mvm-radius) at var(--mvm-x) var(--mvm-y), #000, transparent) (avec sa version -webkit-) : opaque au centre du halo, il s'efface progressivement jusqu'au bord du rayon, 60 px par défaut. On obtient l'effet d'une lampe torche plutôt qu'un trou net.
Au repos, le halo est éteint (calque à opacité 0) : seule la surface se lit. Quand la souris entre, le script place le centre du halo sous le pointeur, en pourcentage de la zone, et ajoute la classe .mvm-on : le calque apparaît en 0,25 s et le halo suit ensuite chaque mouvement sans retard. Il s'éteint quand la souris sort. Les deux couches acceptent votre contenu : texte, ou image et SVG avec la classe .mvm-media, qui couvre toute la couche — c'est ainsi qu'on fait apparaître une photo ou un plan sous une autre image.
Au doigt, le halo s'allume là où le doigt se pose, le suit pendant le glissé et s'éteint quand il se lève ; pour cela la zone bloque le défilement de la page (touch-action: none, réglable par --mvm-touch). Au clavier, la zone (tabindex="0") allume le halo au focus et le déplace avec les flèches : 5 % de la zone par appui, 15 % avec Maj.
Chaque zone garde sa propre position, posée en style sur elle : plusieurs zones dans une racine ou plusieurs copies de l'effet fonctionnent séparément. Rien n'est ajouté sur window.
Accessibilité
- Clavier : Tab allume le halo (contour
#c4b5fd), les flèches le promènent, Maj + flèche avance plus vite. Les flèches ne font défiler la page que lorsque le focus n'est pas sur la zone. - Lecteurs d'écran : le masque ne cache rien aux technologies d'assistance : le texte des deux couches est lu. Si le calque répète la surface (bouton au libellé doublé), ajoutez
aria-hidden="true"sur.mvm-layer. Un jeu qui repose sur la vue (trouver un objet) doit proposer son propre équivalent textuel. - Mouvement réduit : sous
prefers-reduced-motion: reduce, le fondu d'allumage disparaît. Le halo reste attaché au geste de l'utilisateur, qui est l'interaction elle-même. - Toucher : doigt posé = halo allumé, doigt levé = halo éteint. Sur une grande zone dans une page qui défile, mettez
--mvm-touch: pan-y: le défilement vertical reste possible, au prix d'un halo qui ne suit plus le doigt pendant ce défilement.
Compatibilité navigateur
Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur ; la 2e copie de la page réagit seule ; focus clavier et flèches ; doigt posé puis glissé (événements de pointeur tactiles) ; aucune animation en mouvement réduit ; rien qui déborde à 390 px. :focus-visible fixe les versions minimales ; le masque est aussi écrit avec le préfixe -webkit-, nécessaire à Chrome avant la version 120.
Plus ancien : souris et doigt fonctionnent dans les versions plus anciennes qui ont la propriété inset (Chrome 87, Firefox 66, Safari 14.1 : versions où arrive la propriété inset qui superpose les faces) ; seul l'allumage au focus clavier manque. Sans JavaScript, le halo ne s'allume plus et seule la surface est visible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0625-root">
<div class="mvm-zone" tabindex="0">
<span class="mvm-front">Bougez la souris</span>
<div class="mvm-layer">
<span>Caché !</span>
</div>
</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 |
|---|---|---|
--mvm-w et --mvm-h |
280px et 180px |
Taille de la zone (largeur bornée par le conteneur). |
--mvm-corner |
1rem |
Arrondi des coins de la zone. |
--mvm-radius |
60px |
Rayon du halo. Le calque est opaque au centre et s'efface jusqu'à ce rayon. |
--mvm-front et --mvm-front-color |
linear-gradient(135deg,#1e1e2e,#2d2d44) et #9a9aa2 |
Fond et texte de la surface visible. |
--mvm-front-y et --mvm-front-pad |
flex-end et 0 1rem 1rem |
Place du texte de la surface : en bas par défaut, pour ne pas se superposer au texte caché ; center et 0 pour un bouton. |
--mvm-layer et --mvm-layer-color |
linear-gradient(135deg,#6366f1,#8b5cf6,#d946ef) et #fff |
Fond et texte du calque révélé par le halo. |
--mvm-touch |
none |
Valeur de touch-action sur la zone. none : le doigt promène le halo. pan-y ou auto : le doigt fait défiler la page. |
--mvm-bg et --mvm-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine. |
Classe .mvm-media |
— | Sur une image, un SVG ou une vidéo d'une couche : le média la couvre entièrement, le texte éventuel passe au-dessus. |
FAQ
.mvm-front et la seconde dans .mvm-layer, chacune en <img class="mvm-media"> avec le même cadrage. Le halo laisse alors voir la seconde image à l'endroit exact du pointeur.--mvm-touch à pan-y : la page défile, et le halo s'allume encore là où le doigt se pose.--mvm-front-y:center si votre calque n'a pas de texte, ou pour un bouton dont le calque répète le libellé.
