Liquid Lens Magnifier
Une loupe de verre ronde de 80 px remplace le curseur : sous elle, le contenu est vraiment grossi deux fois — une copie agrandie suit le pointeur au pixel près — et éclairci (luminosité ×1,5, contraste ×1,1), à la souris comme au doigt, avec un réglage de grossissement en une variable CSS.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La zone .lg-lens-scene (260 × 170 px, dégradé ardoise #0f172a → #1e293b, cursor: none) contient le contenu à examiner, .lg-lens-text, et la loupe .lg-lens : un disque de 80 px centré sur le pointeur par transform: translate(-50%,-50%), bordure blanche à 20 % de 1,5 px, anneau intérieur en ::after, reflet en dégradé radial et halo indigo. Elle apparaît en 0,2 s (opacity) quand le pointeur entre dans la zone et disparaît quand il en sort.
Le grossissement vient d'une copie. Au chargement, le script clone .lg-lens-text, marque la copie aria-hidden, lui donne la classe .lg-lens-copy et la range dans la loupe, qui coupe ce qui dépasse (overflow: hidden sur un disque). À chaque pointermove, la copie prend la taille de la zone et reçoit translate(r − x·z, r − y·z) scale(z) (origine en haut à gauche), où r est le rayon intérieur de la loupe et z le grossissement lu dans la variable --lens-zoom (2 par défaut) : le point visé tombe exactement au centre du disque. Mesuré, pointeur à (95, 80) : matrix(2, 0, 0, 2, −151, −121) dans Chromium 151 et Firefox 153, (−151,5 ; −121,5) dans WebKit 26.5. La copie porte filter: brightness(1.5) contrast(1.1) : la zone grossie est aussi éclaircie. Si le contenu n'a pas de fond propre, la copie reçoit celui de la zone, pour ne pas laisser voir le texte non grossi derrière.
La loupe grossit par une copie du contenu, et c'est le seul moyen propre : un backdrop-filter ne sait que transformer les couleurs de ce qui est derrière lui, pas l'agrandir. Le backdrop-filter: blur(1px) brightness(1.5) contrast(1.1) du disque éclaircit donc la zone, et c'est la copie agrandie décrite plus haut, opaque, qui fait le grossissement par-dessus. Le suivi passe par des événements pointeur (pointerenter, pointermove) et touch-action: none sur la zone, pour que la souris et le doigt soient traités pareil : mesuré dans Chromium en tactile émulé, la loupe suit le doigt qui glisse (active à 120 × 90 px) et disparaît quand il se lève. Pas de « distorsion de bord » : c'est une loupe nette, sans déformation sur le pourtour.
Accessibilité
- Contenu d'abord : la loupe ne remplace pas le contenu, elle l'agrandit à l'écran. Le texte d'origine reste dans la page, lu normalement par les lecteurs d'écran ; la copie est marquée
aria-hidden="true"pour ne pas être lue deux fois. Si votre contenu contient des identifiants (id), la copie les duplique : retirez-les du contenu agrandi ou donnez-lui des classes. - Clavier : la loupe ne suit que le pointeur ; au clavier il n'y a rien. Pour une image où le détail compte (plan, radio, photo technique), proposez aussi un bouton « agrandir » qui ouvre l'image en plein écran, ou un zoom au pincement natif — la loupe est un confort, pas le seul accès au détail.
- Curseur masqué :
cursor: nonecache la flèche dans la zone ; c'est le disque qui la remplace. Pour un public peu à l'aise avec la souris, gardez un repère :cursor: crosshairlaisse une croix fine au centre de la loupe. - Au doigt :
touch-action: noneempêche le navigateur de faire défiler la page quand le geste commence dans la zone — nécessaire pour que la loupe suive le doigt, mais sur un téléphone, une zone qui occupe tout l'écran bloque le défilement. Laissez de la marge autour, ou réservez l'effet aux écrans à pointeur fin (@media (pointer: fine)). - Mouvement et contraste : seule l'apparition est animée (0,2 s) ; la loupe ne bouge qu'avec le pointeur. Le texte de démo en blanc à 50 % mesure 5,2:1 sur
#0f172aet 4,8:1 sur#1e293b; sous la loupe, éclairci, il gagne encore.
Compatibilité navigateur
JS : événements pointeur (pointerenter, pointermove, pointerleave), cloneNode, getComputedStyle pour lire --lens-zoom. CSS : transform, filter, overflow: hidden sur un disque, touch-action, backdrop-filter (gardé, recouvert). Zéro dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : même grossissement ×2, même cadrage, aucune erreur console. Au doigt, mesuré dans Chromium en mode mobile émulé ; Safari iOS gère touch-action: none depuis la version 13.
Sans événements pointeur (Safari avant 13), la loupe n'apparaît jamais : le contenu reste affiché normalement, sans agrandissement. Sans filter, la zone grossie n'est pas éclaircie mais reste agrandie. Rien ne casse la page.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="lg-lens-scene" data-lens-scene="">
<div class="lg-lens-text">…</div>
<div class="lg-lens" data-lens="">
<!-- copie agrandie de .lg-lens-text, ajoutée par le script -->
</div>
</div>
</div>Le code complet HTML + CSS + JS de Liquid Lens Magnifier, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Grossissement (CSS — .lg-lens-scene { --lens-zoom: 2 }) |
×2 | Lu une fois au chargement. 1,5 pour une loupe discrète, 3 ou 4 pour un détail technique (le contenu agrandi garde sa netteté : c'est du HTML, pas une image étirée — sauf si votre contenu est lui-même une image de basse définition). |
Taille de la loupe (CSS — .lg-lens { width: 80px; height: 80px }) |
80 px | 120-150 px sur une grande image, pour voir un mot entier ; le cadrage se recalcule tout seul (le script lit la taille réelle du disque). Gardez largeur et hauteur égales. |
Traitement de la zone grossie (CSS — .lg-lens .lg-lens-copy { filter: brightness(1.5) contrast(1.1) }) |
luminosité ×1,5, contraste ×1,1 | Pour un document clair (papier, parchemin) : contrast(1.5) brightness(.85), sinon le fond blanchit. Pour du métal ou une photo déjà claire : brightness(1.2) contrast(1.25). filter: none pour une loupe qui grossit sans rien changer. |
Contenu examiné (HTML — .lg-lens-text) |
un paragraphe de 9,6 px en blanc à 50 %, centré | Mettez-y n'importe quoi : une <img>, un plan, un tableau. Tout ce qui est dedans est copié dans la loupe au chargement. Le fond peut être posé sur .lg-lens-text (il est gardé tel quel) ou sur la zone (il est alors recopié sous la copie). |
Curseur (CSS — .lg-lens-scene { cursor: none }) |
masqué | crosshair garde une croix fine au centre de la loupe, utile pour viser précisément ; zoom-in annonce la fonction dès le survol. |
Aspect du verre (CSS — .lg-lens : border, box-shadow, background) |
bordure blanche à 20 % de 1,5 px, halo indigo de 20 px, reflet radial | Une bordure de 2-3 px plus opaque détache mieux la loupe d'un fond clair ; un box-shadow noir plus marqué (0 6px 20px rgba(0,0,0,.4)) la fait flotter au-dessus du document. |
FAQ
backdrop-filter de luminosité et de contraste, seul, ne ferait qu'éclaircir ce qui se trouve derrière le disque : la zone serait plus claire, jamais plus grande (mesuré, aucune mise à l'échelle). CSS seul ne sait pas grossir ce qu'il y a derrière un élément ; la seule façon propre est de dessiner une seconde fois le contenu, agrandi, dans la loupe. C'est ce que fait le script : une copie, recadrée à chaque mouvement pour que le point visé soit au centre. Il n'y a pas de déformation sur le bord du disque : pour une vraie réfraction de verre, voyez Liquid Glass Refraction (fx-0788), qui déforme le fond avec un filtre SVG mais ne grossit pas.zone.querySelector('.lg-lens-copy').remove()) et de relancer le bloc du script sur cette zone — mettez-le dans une fonction qui prend la zone en paramètre, appelée une fois au chargement puis après chaque mise à jour..lg-lens-text à la taille d'affichage (par exemple width: 100%) en gardant le fichier en haute définition : à ×2 ou ×3, la copie affiche les pixels que l'écran ne montrait pas, et le détail est net. Le navigateur ne télécharge pas l'image deux fois (même adresse, même cache). Sur un écran Retina, un fichier deux fois plus grand que l'affichage donne un ×2 parfaitement net ; au-delà du zoom, la photo devient floue comme n'importe quelle image agrandie.
