L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il carosello a ruota panoramica
I weekend di un’agenzia di viaggi nelle cabine di una ruota panoramica d’acciaio: la ruota si trascina intorno al mozzo, corre per inerzia e scatta sulla cabina più in basso, che si apre un poco e mostra date e prezzo. Ogni cabina pende dal suo perno come un pendolo vero: quando la ruota accelera resta indietro, quando frena va oltre, e poi si assesta.
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 Ferris wheel carousel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the weekends of a travel desk, each in a cabin of a Ferris wheel. The wheel turns with the arrows, the keys,
the mouse or a finger, runs on and snaps on the cabin at the bottom, which opens a little to show the dates.
Every cabin hangs from its pin like a real pendulum: it lags when the wheel speeds up, swings past when it
brakes and settles. The wheel and the cabins are drawn by the script -->
<section class="ride" role="region" aria-roledescription="carousel" aria-labelledby="ride-title" data-ride>
<h2 class="ride__title" id="ride-title">Autumn weekends away</h2>
<div class="ride__view" tabindex="0" aria-describedby="ride-help" data-view>
<svg class="ride__wheel" aria-hidden="true" data-wheel></svg>
<div class="ride__cabins" data-cabins></div>
<button class="turn turn--prev" type="button" aria-label="Previous weekend" data-prev>
<svg viewBox="0 0 24 24" aria-hidden="true">
<g transform="matrix(-1 0 0 1 24 0)"><path d="M5.4 9.6A7 7 0 1 1 18.1 15.5"/><path d="M21.7 13.8 18.1 15.5 17.7 11.5"/></g>
</svg>
</button>
<button class="turn turn--next" type="button" aria-label="Next weekend" data-next data-autoclic>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M5.4 9.6A7 7 0 1 1 18.1 15.5"/><path d="M21.7 13.8 18.1 15.5 17.7 11.5"/>
</svg>
</button>
</div>
<p class="sr" id="ride-help">Drag the wheel to turn it, or use the arrow keys. The cabin at the bottom is the weekend chosen.</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.
51 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 «Il carosello a ruota panoramica» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, da solo al centro, il titolo Autumn weekends away e sotto una ruota panoramica d’acciaio chiaro: due cerchioni uniti da un traliccio a zig zag, raggi intrecciati come quelli di una bicicletta, sei raggi maestri che portano ai perni, un mozzo con i bulloni e due gambe ad A che scendono fino a una pedana. Da ogni perno pende una cabina colorata con un tetto d’acciaio, un paesaggio disegnato nel finestrino (dune al tramonto con una tenda, un faro su una scogliera, un lago fra i pini, un rifugio sotto un ghiacciaio, un porto di notte con la luna, una barca a remi in laguna) e il nome sotto. La cabina più in basso, Dune Camp, è aperta sopra la pedana: più grande, col nome più grande e una riga con le date (Oct 16 – 18) e il prezzo (€540). Ai lati della pedana due pulsanti tondi con una freccia curva. Premendo la freccia a destra la ruota gira di un sesto: le cabine restano indietro quando parte, dondolano oltre quando frena e si assestano piano, quelle in alto più lente di quelle in basso; Dune Camp si richiude e Lighthouse Coast, arrivata in basso, si apre con un piccolo rimbalzo. La ruota si trascina col mouse o col dito girando intorno al mozzo; lanciata corre per inerzia, rallenta e alla fine scatta come una calamita sulla cabina più vicina, e le cabine dondolano forte. Col mouse che passa sopra una cabina, la cabina si schiarisce, il paesaggio si avvicina e lei dondola un poco nel verso del mouse; un clic su una cabina la porta in basso per la via più corta, un clic su quella aperta la fa dondolare. Con la ruota selezionata le frecce della tastiera la girano, Home e End vanno alla prima e all’ultima, e un anello chiaro circonda la cabina aperta.
Come funziona
Un numero per la ruota
La ruota è un numero solo, p: la cabina in basso come frazione. Il perno della cabina i sta all’angolo b = (i − p)·2π/N dal basso, cioè a centro + R·(sin b, cos b). Una molla porta p alla cabina scelta, a = ω²·(meta − p) − 2ζω·v, con ω e ζ da GLIDE (ζ sotto 1, così va un filo oltre); la rigidità si divide per la radice della distanza, così mezzo giro parte con la stessa spinta di un passo.
L’accelerazione dei perni
Da p, dalla sua velocità e dalla sua accelerazione (quella che calcola la molla, liscia, non la differenza fra due fotogrammi) esce l’accelerazione di ogni perno in pixel: quella tangente, R·b″ lungo la ruota, e quella verso il mozzo, R·b′². Moltiplicata per PUSH e tenuta sotto due g con una tangente iperbolica, così un lancio forte non fa fare il giro della morte alle cabine.
Il pendolo su un perno che si muove
Ogni cabina è un pendolo: L·φ″ = −g·sin φ − ax·cos φ + ay·sin φ, più lo smorzamento dell’aria (HOLD) e un filo di attrito secco nel perno, che ferma le ultime oscillazioni piccole invece di lasciarle sfumare per sempre. g esce da SWING: g = (2π / SWING)²·L. L va dal perno al centro della cabina e cresce quando la cabina si apre; in alto la spinta verso il mozzo toglie un po’ di gravità e le cabine dondolano più piano, come quelle vere. Si integra a ogni fotogramma con un passo di 1/30 s al massimo, tagliato in fette di 4 ms.
Inerzia e calamita
Col dito o col mouse conta l’angolo del puntatore intorno al mozzo (il cambio di atan2 è (y·dx − x·dy) / r², con r mai sotto mezzo raggio, dove l’angolo traballa) e la ruota lo insegue su una molla rigida. Lasciata con più di SNAP cabine al secondo corre libera e rallenta con a = −FRICTION·v; sotto SNAP la calamita sceglie la cabina dove si sarebbe fermata, p + v / FRICTION, e ci arriva con la molla: lo scatto finale fa dondolare le cabine.
La cabina che si apre
Ogni cabina ha un suo numero f, da 0 chiusa a 1 aperta, su una molla che rimbalza appena; il CSS ne ricava larghezza, altezza, finestrino, nome e la riga di date e prezzo con calc() e la variabile --f. Si apre solo quella in basso e solo quando la ruota è quasi ferma, così le cabine che passano non si gonfiano.
Disegno, misure e quiete
La ruota è un SVG rifatto dallo script quando cambia la larghezza: raggi intrecciati in due famiglie, traliccio, staffe dei perni, mozzo con un gradiente radiale, gambe ad A; il gruppo della ruota gira con un solo attributo transform, mentre il riflesso sul cerchione resta fermo come la lampada. Il raggio si riduce per far stare le cabine di lato; con sei cabine due vicine non si toccano mai in nessuna posizione. Quando tutto è fermo il ciclo si spegne.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SWING | script.js | 1.25 | I secondi che una cabina impiega a dondolare di là e tornare. |
HOLD | script.js | 0.14 | Quanto l’aria frena una cabina che dondola: 0 non si ferma più (resta solo l’attrito del perno). |
PUSH | script.js | 0.38 | Quanto le cabine sentono la ruota che accelera e frena: 0 per niente. |
GLIDE | script.js | [4.6, 0.62] | La molla della ruota verso una cabina: quanto in fretta ci arriva e quanto è frenata (sotto 1 va un po’ oltre). |
FRICTION | script.js | 1.5 | Quanto in fretta una ruota lanciata rallenta prima di scattare su una cabina. |
SNAP | script.js | 1.1 | La velocità, in cabine al secondo, sotto la quale la ruota che corre scatta sulla cabina più vicina. |
WEEKENDS | script.js | [['Dune Camp', 'Oct 16 – 18', '€540', '#b9781f', 'dunes'], …] | I weekend: nome, date, prezzo da, colore della cabina, paesaggio nel finestrino (dunes, lighthouse, lake, glacier, port, lagoon). Pensata per sei cabine: con più cabine la ruota le stringe e due vicine possono sfiorarsi. |
--wheel | style.css | 128px | Il raggio della ruota al massimo (sul telefono si riduce da solo). |
--open-w | style.css | 128px | La larghezza della cabina aperta (106 sul telefono). |
Quando usarla
Per le mete o le esperienze di un’agenzia di viaggi, i weekend di un festival, le serate di un locale, le stanze di un albergo, le gite di una scuola: dove ogni cosa ha un’immagine e un nome, sono poche (sei, sette) e il gioco della ruota fa venire voglia di girare.
Sul telefono
La ruota si riduce a 128 pixel di raggio e le cabine a 64 per 84 (106 per 140 quella aperta), così le cabine di lato restano dentro lo schermo con lo spazio per dondolare. Il dito trascina la ruota di lato intorno al mozzo e la lancia (su e giù scorre la pagina), un tocco su una cabina la porta in basso e i pulsanti sono di 42 pixel.
Con il movimento ridotto
La ruota non gira e le cabine non dondolano: a ogni cambio la ruota si dissolve e ricompare con la cabina nuova già in basso e già aperta, le cabine dritte. Trascinare è uno scorrimento: una cabina nel verso della mano. Il mouse sopra una cabina la schiarisce soltanto. Il componente entra solo in dissolvenza.
Trappole
- Con la fisica pura un passo di un sesto di giro dava accelerazioni di quasi due g e le cabine dondolavano di 50 gradi, sbattendo sulle vicine: la spinta è scalata (PUSH) e tenuta sotto due g con una tangente iperbolica.
- Con otto cabine, a certi angoli, la cabina di lato e quella sopra si sovrapponevano: con sei, la distanza fra due perni vicini è proprio il raggio, e la cabina più il suo gancio ci sta in ogni posizione.
- Lo smorzamento dell’aria da solo fa sfumare le oscillazioni piccole in modo esponenziale, per sempre: il ciclo non si spegneva mai. Un filo di attrito secco nel perno (una tangente iperbolica della velocità) le ferma in un tempo finito, come succede davvero.
- La cabina che si gonfiava mentre la ruota passava sembrava un errore: si apre solo quando la ruota è quasi ferma sulla sua cabina.
- Il nome a 12 pixel in una cabina di 76 andava a capo dentro la parola (Lighthous / e): la cabina è di 80, il nome di 11,5 e la parola non si spezza più.
- I colori dati come var() negli attributi di presentazione dell’SVG non sono affidabili: lo script legge le variabili di :root e le scrive nei tracciati della ruota quando la ridisegna.
- Vicino al mozzo l’angolo del puntatore cambia di colpo per pochi pixel: nel calcolo dell’angolo la distanza dal mozzo non scende sotto mezzo raggio.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Figtree (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
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.
