Il contatore a rulli

Transizioni, TestoGSAPFacilePeso compresso: Demo 5,8 KBGSAP 28 KBGratisScarica lo zip

Un caricamento che va avanti a scatti come una slot machine: ogni cifra è un rullo che gira fino al numero nuovo, l’avanzamento segue quello che si carica davvero e non finisce mai prima di una durata minima.

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" class="carica">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The reel counter</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
  <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>
  <!-- il velo del caricamento: i rulli del contatore li costruisce lo script -->
  <div class="velo" data-velo aria-hidden="true">
    <p class="velo__lato velo__lato--sinistra">
      <span class="maschera"><span data-scritta>Cinema Lucciola</span></span>
      <span class="maschera"><span data-scritta>Summer season</span></span>
    </p>
    <p class="velo__lato velo__lato--destra">
      <span class="maschera"><span data-scritta>since</span></span>
      <span class="anni" data-anni></span>
    </p>
    <div class="contatore" data-contatore></div>
  </div>

  <main class="programma">
    <header class="programma__testa">
      <span class="programma__marchio">Cinema Lucciola</span>
      <span class="programma__quando">July, nightly at 9:30 pm</span>
    </header>
    <p class="nota" data-nota>The loader moves in jolts, like a slot machine: every digit is a reel that spins to its number. The button below runs it again.</p>
    <h1 class="programma__titolo" data-titolo>The July programme</h1>
    <ul class="film" data-film>
      <li><span class="film__giorno">3 July</span><span class="film__nome">The Lighthouse</span><span class="film__regia">by Nora Valli</span></li>
      <li><span class="film__giorno">10 July</span><span class="film__nome">Snow in July</span><span class="film__regia">by Pietro Galante</span></li>
      <li><span class="film__giorno">17 July</span><span class="film__nome">The Bees</span><span class="film__regia">by Irene Casali</span></li>
      <li><span class="film__giorno">24 July</span><span class="film__nome">The Last Train</span><span class="film__regia">by Clara Bensi</span></li>
      <li><span class="film__giorno">31 July</span><span class="film__nome">The Moon in the Well</span><span class="film__regia">by Aldo Ferri</span></li>
    </ul>
    <button class="rivedi" type="button" data-rivedi>
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.34-5.66" /><path d="M20 4v5h-5" /></svg>
      <span>Replay the loader</span>
    </button>
  </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.

50 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 «Il contatore a rulli» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La pagina arriva coperta da un velo color carta: in basso un contatore enorme in un carattere con le grazie, in alto il nome della rassegna e, a destra, gli anni. Il contatore non conta uno per uno: va avanti a scatti, e a ogni scatto le cifre girano come i rulli di una slot machine fino al numero nuovo, quella delle unità con un giro in più. I numeri di mezzo cambiano a ogni caricamento. Intanto gli anni a destra girano dal 1998 al 2026. A cento le cifre escono verso l’alto, le scritte le seguono e il velo si alza sul programma del mese.

Come funziona

Il rullo

Ogni cifra è una finestra alta una riga con dentro una striscia delle cifre da 0 a 9 ripetute tre volte; si mostra sempre una riga della copia di mezzo. Per girare fino a una cifra la striscia sale di quello che manca più i giri interi chiesti, con back.out(1,15) in 0,62 secondi e 0,06 di ritardo fra un rullo e l’altro; finito il giro torna di nascosto sulla copia di mezzo.

Un avanzamento onesto

L’avanzamento è il più piccolo fra quello che si è caricato davvero (qui i due caratteri della pagina) e il tempo diviso 2,6 secondi, la durata minima; il numero mostrato lo insegue a 7 al secondo. Così non finisce mai prima del minimo, e se la rete è lenta aspetta.

Gli scatti

Gli scatti sono fissati prima: al 10% dell’avanzamento e dopo 0,55 secondi un numero fra 12 e 24, al 45% e dopo 1,25 fra 38 e 55, al 75% e dopo 1,9 fra 66 e 84, a cento dopo 2,5. Le centinaia si accendono allargandosi solo a cento. Gli anni a destra girano un rullo alla volta, quando cambia la cifra.

L’uscita

I rulli salgono di 1,15 em fuori dalla maschera del contatore, uno dopo l’altro, le scritte le seguono, e il velo si alza con un clip-path da inset(0) a inset(0 0 100% 0) in un secondo di expo.inOut; sotto entrano il titolo e i film.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MINIMO`	script.js	`2.6`	La durata minima del caricamento, in secondi.
`INSEGUE`	script.js	`7`	Quanto in fretta il numero mostrato raggiunge l’avanzamento vero.
`SCATTI`	script.js	`4`	Le soglie, i tempi minimi e gli intervalli da cui si pescano i numeri.
`GIRO, SFASA`	script.js	`0.62, 0.06`	Quanto dura il giro dei rulli e il ritardo fra uno e l’altro.
`ANNI`	script.js	`1998, 2026`	Gli anni che girano a destra.

Provali nel Playground

Quando usarla

Per il caricamento di un sito che ha davvero qualcosa da caricare: un archivio, una galleria, una pagina con tante immagini, un cinema. Il meccanismo dei rulli va bene anche per un numero che deve cambiare con un po’ di teatro.

Sul telefono

Il contatore resta in basso a sinistra, più piccolo, e gli anni vanno sotto il nome della rassegna.

Con il movimento ridotto

Niente caricamento: il velo non c’è e la pagina è subito lì.

Trappole

Per far entrare o uscire una cifra non si sposta la striscia, che mostrerebbe la cifra di sotto: si sposta tutto il rullo, dentro una maschera alta una cifra.
Se il giro nuovo parte prima che il vecchio finisca, il rullo resta sulla copia sbagliata: prima di ogni giro si riporta, di nascosto, sulla cifra di partenza della prima copia.
Un contatore che conta uno per uno legato al vero caricamento o corre troppo o si pianta al 99: gli scatti con un tempo minimo e un inseguimento morbido tengono il ritmo.

Librerie

GSAP 3.15.0, Instrument Serif 5.3.0, Mona Sans (font variabile) 5.3.0.

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

Collaudo

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