La giostra dei cavalli

SVGGSAP, Solo CSSImpegnativaPeso compresso: Demo 9,5 KBGSAP 28 KBGratisScarica lo zip

Una giostra a cavalli vista di tre quarti, tutta in SVG: il tetto a strisce con la mantovana e le lampadine, la colonna con gli specchi e i cavallini sui pali tortili. Gira davvero in prospettiva, i cavalli salgono e scendono sfalsati, poi rallenta, si ferma con un dondolio e riparte. Un clic cambia la velocità.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>La giostra dei cavalli</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="banco" data-banco>
    <header class="testo">
      <p class="marchio">Hollis Bay Pleasure Pier</p>
      <h1 class="titolo">Pick a horse,<br>hold on tight.</h1>
      <p class="frase">The painted gallopers at the end of the pier turn every summer evening, under the lights, until the last ride.</p>
      <button class="velocita" type="button" data-velocita>
        <span class="velocita__fondo" aria-hidden="true"></span>
        <svg class="velocita__ferro" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.5 20.5C4 17 3.6 11 6 7.2 8 4 11 3 12 3s4 1 6 4.2c2.4 3.8 2 9.8-.5 13.3" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" /><circle cx="6.6" cy="12" r="1.1" fill="currentColor" /><circle cx="17.4" cy="12" r="1.1" fill="currentColor" /><circle cx="8.6" cy="6.6" r="1.1" fill="currentColor" /><circle cx="15.4" cy="6.6" r="1.1" fill="currentColor" /></svg>
        <span class="velocita__scritta">Speed: <span data-nome-velocita>steady</span></span>
      </button>
    </header>

    <div class="palco" data-palco>
      <svg class="scena" data-scena viewBox="0 0 900 820" preserveAspectRatio="xMidYMid meet" role="img" aria-label="A carousel with painted horses seen from three quarters: the platform turns, the horses rise and fall on their twisted poles, then it slows down and stops. Click to change the speed.">
        <defs>
          <linearGradient id="g-specchio" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" style="stop-color: var(--specchio-chiaro)" />
            <stop offset="1" style="stop-color: var(--specchio)" />
          </linearGradient>
          <linearGradient id="g-ombra-tetto" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stop-color="#000" stop-opacity="0.38" />
            <stop offset="0.3" stop-color="#000" stop-opacity="0" />
            <stop offset="0.62" stop-color="#000" stop-opacity="0" />
            <stop offset="1" stop-color="#000" stop-opacity="0.42" />
          </linearGradient>
          <linearGradient id="g-colonna" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" style="stop-color: var(--colonna-scura)" />
            <stop offset="0.45" style="stop-color: var(--colonna)" />
            <stop offset="1" style="stop-color: var(--colonna-scura)" />
          </linearGradient>
          <linearGradient id="g-bordo" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stop-color="#000" stop-opacity="0.4" />
            <stop offset="0.5" stop-color="#000" stop-opacity="0" />
            <stop offset="1" stop-color="#000" stop-opacity="0.4" />
          </linearGradient>
        </defs>

        <ellipse class="ombra" cx="450" cy="752" rx="372" ry="30" />

        <g class="giostra" data-giostra>
          <!-- la piattaforma: il bordo, il pavimento con le assi che girano -->
          <g data-piattaforma>
            <ellipse class="piatto-sotto" cx="450" cy="648" rx="344" ry="90" />
            <rect class="piatto-sotto" x="106" y="618" width="688" height="30" />
            <g data-fascia></g>
            <rect x="106" y="618" width="688" height="30" fill="url(#g-bordo)" />
            <ellipse class="pavimento" cx="450" cy="618" rx="344" ry="90" />
            <g data-assi></g>
            <ellipse class="pavimento-orlo" cx="450" cy="618" rx="334" ry="86" />
          </g>

          <!-- i cavalli dietro la colonna -->
          <g data-dietro></g>

          <!-- la colonna centrale con gli specchi -->
          <g data-colonna>
            <rect x="404" y="236" width="92" height="384" fill="url(#g-colonna)" />
            <g data-specchi></g>
            <rect class="oro" x="398" y="300" width="104" height="10" rx="3" />
            <rect class="oro" x="398" y="548" width="104" height="10" rx="3" />
            <ellipse class="oro-scuro" cx="450" cy="620" rx="62" ry="16" />
            <ellipse class="oro" cx="450" cy="614" rx="56" ry="13" />
          </g>

          <!-- i cavalli davanti alla colonna -->
          <g data-davanti></g>

          <!-- il tetto a strisce, la mantovana e le lampadine -->
          <g data-tetto>
            <path class="tetto" data-falda d="" />
            <g data-strisce></g>
            <path data-ombra-tetto fill="url(#g-ombra-tetto)" d="" />
            <g data-mantovana></g>
            <path class="orlo-tetto" data-orlo d="" />
            <g data-lampadine></g>
            <!-- il pennacchio in cima -->
            <line class="asta" x1="450" y1="74" x2="450" y2="22" />
            <path class="bandiera" data-bandiera d="" />
            <circle class="oro" cx="450" cy="76" r="9" />
            <circle class="oro-chiaro" cx="447" cy="73" r="3" />
          </g>
        </g>
      </svg>
    </div>
  </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.

34 valori da cambiare

Apri il Playground

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 giostra dei cavalli» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

All’apertura la piattaforma si allarga con un rimbalzo, il tetto cade dall’alto e rimbalza al suo posto, i cavallini crescono sui pali con un elastico e le lampadine della mantovana si accendono una dopo l’altra, e poi restano accese, ferme. Poi la giostra parte: piano, accelera, gira a velocità piena e frena. Tutto gira insieme: le strisce rosse e crema del tetto, gli smerli della mantovana, gli specchi della colonna (che si illuminano quando guardano verso di noi), le assi del pavimento e i pannelli del bordo. I cavalli passano davanti alla colonna e poi dietro, dove si fanno più piccoli; ai lati si vedono di scorcio. Ognuno sale e scende sul suo palo, sfalsato dagli altri, e beccheggia un po’ mentre sale; le spire dei pali scorrono come se girassero. Il pennacchio in cima sventola più forte quando la giostra corre e ricade quando si ferma. Alla fermata la piattaforma torna un po’ indietro, poi avanti, e si assesta; dopo una sosta riparte. Un clic sulla giostra o sul pulsante cambia la velocità: regolare, al galoppo, piano. Testi del luna park inventato Hollis Bay Pleasure Pier.

Come funziona

Tutto da un angolo solo

Lo stato della giostra è un numero: A, i gradi fatti dalla piattaforma. Una funzione disegna, chiamata dal ticker di GSAP a ogni fotogramma, ne ricava tutto: le strisce, gli smerli, le lampadine, gli specchi, le assi, i pannelli, i cavalli, i pali e il pennacchio. La giostra è vista di tre quarti, quindi ogni cerchio è un’ellisse: il punto all’angolo g sta a x = centro + r·sin g e y = quota + r·0,26·cos g. Con cos g positivo è davanti, con cos g negativo è dietro.

Le strisce che girano

Il tetto è un cono: la falda crema è fissa, e sopra ci sono le strisce rosse, ognuna un settore fra due angoli. Di ogni settore si disegna solo il pezzo davanti, tagliato fra −90° e 90°: un triangolo dalla punta del tetto a sette punti sull’orlo. Lo stesso taglio vale per gli smerli della mantovana (con il bordo in basso a mezzaluna, 11 + 17·sin(π·u)), per i pannelli del bordo della piattaforma e per gli specchi della colonna. Una sfumatura scura fissa sui fianchi del tetto fa il resto della rotondità.

Davanti e dietro la colonna

La colonna sta in mezzo a due gruppi vuoti: data-dietro prima di lei, data-davanti dopo. A ogni fotogramma i cavalli si ordinano per cos g e ognuno va nel gruppo giusto con appendChild, solo quando serve. Più sono lontani più sono piccoli (da 0,78 a 1,04). Ogni cavallo è tangente al cerchio, quindi la sua larghezza è scale(cos g, 1): davanti va verso destra, dietro verso sinistra, ai lati si vede di scorcio (mai sotto 0,2).

Su e giù sui pali

La salita è legata al giro, non al tempo: su = ALTEZZA_SALTO × (0,5 − 0,5·cos(A × SALTI + fase)), con una fase diversa per ogni cavallo. Così quando la giostra rallenta anche i cavalli rallentano, e quando si ferma si fermano. Il beccheggio è il seno della stessa fase. Le spire del palo tortile sono trattini obliqui spostati di A / 18: dopo un giro intero tornano al loro posto, e così il giro ripetuto non scatta.

La regia e il clic

Una timeline ripetuta all’infinito: la corsa è un tween da 0 a 1 con una curva fatta a mano (rampa morbida, velocità piena, rampa morbida) che arriva su un numero intero di giri; poi il dondolio, cinque fotogrammi chiave di gradi in più (indietro, avanti, indietro, fermo), e una sosta. Il clic cambia il timeScale della timeline con un tween di 0,9 s, così la giostra accelera o rallenta senza scatti, e fa sobbalzare la giostra con un elastico. Il pennacchio usa la velocità misurata fra due fotogrammi: sventola e si alza quando corre, ricade quando è ferma.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DURATA_CORSA`	script.js	`10`	Secondi di ogni corsa, dalla partenza alla fermata.
`GIRI`	script.js	`3`	Giri della piattaforma a ogni corsa.
`CAVALLI`	script.js	`6`	Quanti cavalli girano sulla piattaforma.
`SALTI`	script.js	`4`	Salite e discese di ogni cavallo per ogni giro (un numero intero, così il giro torna uguale).
`ALTEZZA_SALTO`	script.js	`30`	Quanto salgono i cavalli sul palo.
`DONDOLIO`	script.js	`7`	Gradi del dondolio quando la giostra si ferma.
`--rosso, --crema, --oro`	style.css	`#D8443B, #F6E7CF, #E9B949`	Le strisce del tetto, la mantovana e gli ottoni.

Provali nel Playground

Quando usarla

Per luna park, fiere, feste di paese, negozi di giocattoli, pagine per bambini, inviti di compleanno e pagine d’estate o di Natale: una scena allegra che si guarda girare a lungo e invita a toccarla.

Sul telefono

Il testo del luna park va sopra e la giostra sotto, più piccola ma uguale: stessi cavalli, stessi giri, stesso dondolio. La velocità cambia toccando la giostra o il pulsante.

Con il movimento ridotto

La giostra è già ferma al suo posto con le luci accese e compare in dissolvenza; il clic cambia solo la scritta della velocità, in dissolvenza, senza niente che si sposti.

Trappole

Con la velocità integrata fotogramma per fotogramma il giro non torna mai uguale e la giostra si ferma a un angolo qualsiasi: meglio un tween con una curva che dice dove arriva, su un numero intero di giri.
Tutto quello che dipende dall’angolo deve tornare uguale dopo un giro intero (salite con SALTI intero, spire spostate di A / 18 su un passo di 10): altrimenti quando la timeline ricomincia i cavalli e i pali scattano.
Un settore che passa da dietro a davanti va tagliato a −90° e 90° dopo aver riportato il suo centro fra −180° e 180°: senza, gli smerli a cavallo del giro saltano da un lato all’altro.
Spostare i cavalli fra i due gruppi a ogni fotogramma costa poco, ma solo se si fa quando serve: un appendChild continuo fa ricalcolare la pagina senza motivo.
Il cavallo di lato ha scale(cos g) quasi zero e diventa una riga: va tenuto almeno a 0,2, col segno giusto, perché si veda di scorcio e non sparisca.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 9,5 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 11 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.