La valutazione a stelle
Valutazioni, SVG, Hover
NuovaGratis
Tutti i componenti
La lente sul prodotto
Un orologio disegnato abbastanza fine da guardarlo da vicino: una lente rotonda segue il puntatore su una molla morbida e lo mostra ingrandito e nitido fino alla scritta più piccola del quadrante; la rotella cambia l’ingrandimento, la lancetta dei secondi scatta dentro e fuori dalla lente, e la cassa cambia colore.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The product lens</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/public-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the product lens: a round glass follows the pointer over the watch on a soft spring and shows it bigger, sharp,
down to the smallest print; the wheel changes how much, and the case can change colour under it -->
<section class="product" aria-labelledby="product-title" data-product data-autoclic>
<div class="shot" tabindex="0" role="img" aria-label="The Meridiana 38 watch. Arrows move the lens, plus and minus change how much it enlarges." data-shot>
<div class="shot__art" data-art></div>
<div class="lens" aria-hidden="true" data-lens>
<div class="lens__view" data-view></div>
<span class="lens__zoom" data-zoom></span>
</div>
</div>
<div class="product__info">
<div>
<h2 class="product__title" id="product-title">Meridiana 38</h2>
<p class="product__meta">Automatic · 38 mm · steel case</p>
</div>
<p class="product__price">€640</p>
</div>
<div class="swatches" role="radiogroup" aria-label="Case" data-swatches></div>
<p class="product__hint"><span class="hint--pointer">Move over the watch to look closer; the wheel zooms.</span><span class="hint--touch">Rest a finger on the watch and drag it to look closer.</span></p>
<p class="sr" aria-live="polite" data-live></p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
22 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «La lente sul prodotto» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco l’immagine di un orologio su un fondo crema: cassa d’acciaio, cinturino di cuoio con le cuciture, quadrante con le tacche, il 12, ORA LENTA e MILANO, la data 14, un piccolo quadrante dei secondi con la lancetta rossa che scatta ogni secondo e, piccolissima, AUTOMATIC · 28 800 A/H · 100 M; sotto, Meridiana 38, Automatic · 38 mm · steel case, €640, tre scelte per la cassa (Steel, Gold, Black) e un suggerimento su come guardare, che al telefono parla del dito. Passando col puntatore sull’immagine il cursore sparisce e compare una lente rotonda con un riflesso, che segue il puntatore su una molla morbida e mostra l’orologio due volte e mezzo più grande e nitido: si leggono le scritte minuscole e si vede la lancetta scattare. La rotella cambia l’ingrandimento da 1,5 a 4 volte, scritto in basso nella lente. Scegliendo un’altra cassa, la cassa e la corona cambiano colore piano, nell’immagine e nella lente insieme. Al telefono la lente compare sopra il dito.
Come funziona
Lo stesso disegno, più grande
L’orologio è un SVG; la lente ne contiene una seconda copia, larga ZOOM volte l’immagine e spostata in modo che il punto guardato stia al centro della lente: così ingrandito resta nitido, perché è un disegno e non una foto. Le due copie hanno gradienti con nomi diversi.
La molla
La lente segue il punto guardato su una molla (FOLLOW), calcolata sul ticker di GSAP a passi di 4 millisecondi; entrando compare da 0,4 con back.out, uscendo svanisce rimpicciolendo.
Ingrandire e cambiare cassa
La rotella moltiplica l’ingrandimento, tenuto fra 1,5 e 4 e portato al valore nuovo in 0,3 secondi; la lente è larga SIZE pixel. La cassa ha due colori in due variabili CSS sull’elemento radice, che GSAP porta ai colori nuovi (CASES): le due copie le leggono entrambe.
I secondi
La lancetta dei secondi, nell’immagine e nella lente, è mossa da un solo tween: 6 gradi ogni secondo con un piccolo rimbalzo (back.out), attorno al centro del quadrantino (svgOrigin).
Tasti, dito e anteprima
L’immagine si raggiunge col Tab: la lente compare al centro, le frecce la spostano, più e meno cambiano l’ingrandimento, Esc la chiude; le casse sono un gruppo di scelte da cambiare con le frecce. Al telefono un dito appoggiato fa comparire la lente sopra di sé, così non la copre, e alzandolo la lente se ne va. Un clic da script (l’anteprima della libreria) è un puntatore finto che gira sul quadrante, ingrandisce sulla scritta piccola, cambia cassa e se ne va.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
ZOOM | script.js | 2.5 | Quanto ingrandisce la lente all’inizio (la rotella lo porta da 1,5 a 4). |
SIZE | script.js | 150 | La larghezza della lente, in pixel. |
FOLLOW | script.js | [260, 0.82] | La molla che porta la lente sotto il puntatore: quanto è rigida e quanto è frenata. |
CASES | script.js | [['Steel', '#c9ccd1', '#8f949c'], …] | Le casse: nome, colore e la sua ombra. |
Quando usarla
Per le schede prodotto di un negozio (gioielli, orologi, tessuti, ceramiche), un’etichetta da leggere, una mappa o una tavola illustrata, il dettaglio di un quadro.
Sul telefono
Il dito prende il posto del puntatore: appoggiato e trascinato, la lente compare sopra di lui; il tocco lungo non apre il menu del sistema e la pagina non scorre sotto il dito (touch-action none).
Con il movimento ridotto
La lente compare e sparisce senza crescere, sta subito sotto il puntatore senza molla, l’ingrandimento cambia di colpo, la lancetta dei secondi resta ferma e la cassa cambia colore subito.
Trappole
- Ingrandire una foto la sgrana, ingrandire un disegno SVG no: per un prodotto vero la foto dentro la lente deve essere due o tre volte più grande di quella mostrata.
- Due copie dello stesso SVG nella pagina non possono avere gli stessi id per i gradienti: la seconda userebbe quelli della prima.
- Gli stop dei gradienti leggono le variabili CSS solo come stile (style con stop-color: var(--case)), non come attributo; GSAP anima le variabili sull’elemento radice.
- Al telefono una lente sotto il dito non si vede: compare sopra di lui.
Librerie
GSAP 3.15.0, Bodoni Moda (font variabile) 5.3.0, Public Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 3 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
