Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La giornata allo scroll
Scorri dentro l’anteprima
Una giornata intera sopra lo skyline di una città disegnata: scorrendo il cielo va dall’alba alla notte, il sole fa il suo arco e sale la luna, le ombre girano e si allungano, le finestre si accendono una a una e un grande orologio conta le ore con le cifre che rotolano.
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>A day on the scroll</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="scena" data-scena>
<div class="palco" data-palco>
<!-- il cielo: tre colori che lo script fonde ora per ora -->
<div class="cielo" data-cielo aria-hidden="true"></div>
<!-- la città: lo script la disegna su misura dello schermo -->
<svg class="citta" data-citta aria-hidden="true" focusable="false"></svg>
<header class="testata">
<p class="marchio">
<svg class="marchio__segno" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M4 22a12 12 0 0 1 24 0" fill="none" stroke="currentColor" stroke-width="3"/><path d="M2 26h28" stroke="currentColor" stroke-width="3"/><path d="M16 4v4M6.5 8.5l2.8 2.8M25.5 8.5l-2.8 2.8" stroke="currentColor" stroke-width="3"/></svg>
<span>Hotel Solstice</span>
</p>
<a class="prenota" href="#"><span class="prenota__fondo" aria-hidden="true"></span><span class="prenota__testo">Book a night</span></a>
</header>
<section class="racconto">
<p class="orologio" data-orologio aria-live="off"></p>
<div class="momento" data-momento aria-live="polite"></div>
</section>
<p class="cenno" data-cenno>Scroll through the day</p>
</div>
</main>
<!-- i momenti della giornata: l'ora in cui comincia ciascuno, il nome e la riga -->
<ul class="momenti" data-momenti hidden>
<li data-ora="0" data-nome="Dawn">First light over Port Avalon. The rooftop pool opens for early swimmers.</li>
<li data-ora="8.5" data-nome="Morning">Breakfast runs until eleven, with bread from the bakery downstairs.</li>
<li data-ora="11.5" data-nome="Noon">High sun. Every room has blinds that close on their own.</li>
<li data-ora="17.5" data-nome="Sunset">Golden hour at the Terrace Bar. Take the seat by the rail.</li>
<li data-ora="20.5" data-nome="Night">The city switches on, window by window. Your bed is turned down at ten.</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
41 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 giornata allo scroll» da Animorio e adattala al mio sitoCosa fa
La pagina di un hotel inventato, Hotel Solstice, ferma sullo schermo mentre si scorre: in basso lo skyline di una città, con due file di palazzi lontani nella foschia, i palazzi davanti con le loro finestre, una strada coi lampioni. Tutta la discesa è una giornata, dalle 5:30 del mattino alle 23:30. Il cielo è un gradiente di tre colori che passa dalla notte all’alba, al mattino, al mezzogiorno, al tramonto e di nuovo alla notte; il sole sorge a sinistra, fa il suo arco e tramonta dietro i palazzi, cambiando colore dall’arancio al giallo pallido; poi da destra sale una falce di luna e compaiono piccole stelle ferme. Le ombre dei palazzi sulla strada girano col sole: corte a mezzogiorno, lunghe e storte all’alba e al tramonto; su ogni palazzo il lato lontano dal sole si scurisce. Al crepuscolo le finestre si accendono una dopo l’altra (la luce sale come una tenda che si alza, con un piccolo rimbalzo), i lampioni si accendono in fila e qualche finestra si spegne prima di mezzanotte; all’alba ce n’è qualcuna ancora accesa. Passano nuvole che cambiano colore col cielo, uno stormo al mattino e uno al tramonto. In alto un grande orologio conta le ore a passi di cinque minuti: ogni cifra che cambia rotola via e la nuova arriva con un rimbalzo, all’indietro se si risale. A ogni momento della giornata cambia la riga dell’hotel, parola per parola, e il testo passa da scuro a chiaro quando il cielo si fa buio.
Come funziona
Lo scorrimento è un’ora
Un solo tween porta un numero, l’ora, da START_HOUR a END_HOUR mentre la scena scende dall’inizio alla fine (start top top, end bottom bottom, scrub 0,8). Tutto il resto si calcola da quel numero a ogni fotogramma, in un’unica funzione: il cielo, il sole, le ombre, le finestre, l’orologio. Lenis rende morbido lo scorrimento e passa ogni passo a ScrollTrigger.update.
Il cielo fra cinque momenti
I cinque cieli (alba, mattino, mezzogiorno, tramonto, notte) sono tre colori ciascuno: in alto, a metà, all’orizzonte. Fra uno e l’altro ci sono passaggi fatti mescolando i vicini, e la fusione segue una curva a coseno, così il cambio non ha scatti. I colori finiscono in tre variabili CSS di un linear-gradient; anche palazzi, vetri, strada e nuvole prendono il loro colore da variabili calcolate dallo stesso cielo.
Una città su misura dello schermo
L’SVG ha il viewBox grande quanto il palco, così un’unità è un pixel, e la città si disegna con un generatore di numeri a caso col seme fisso: ogni volta la stessa. Sul telefono i palazzi sono più stretti e bassi e l’arco del sole sta sotto il testo. Si ridisegna solo se cambia la larghezza o l’altezza di molto, non quando entra ed esce la barra di Safari.
Ombre che girano col sole
Tutte le ombre sono un solo path in un gruppo semitrasparente, così dove si sovrappongono non si scuriscono il doppio. Ogni ombra parte dalla base del palazzo e scende sulla strada: la sua punta si sposta dalla parte opposta al sole, tanto più quanto il sole è basso, e si allunga quando il sole scende. Il lato in ombra di ogni palazzo è un rettangolo scuro la cui opacità dipende da dove sta il sole.
Finestre, cifre e righe
Ogni finestra che si accenderà ha la sua ora, in fila dal crepuscolo; quando l’ora la supera parte un tween di scaleY con back.out, e all’indietro si spegne. Le cifre dell’orologio sono caselle con overflow: hidden: quella vecchia esce in alto, la nuova entra dal basso con un rimbalzo (al contrario risalendo). La riga di ogni momento è divisa in parole che salgono in fila.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START_HOUR, END_HOUR | script.js | 5.5, 23.5 | L’ora in cima e in fondo alla pagina, in ore e decimi: 5.5 sono le 5:30. END_HOUR arriva al massimo a 24, mezzanotte. |
WINDOWS | script.js | 120 | Quante finestre si accendono al crepuscolo, una dopo l’altra. Le altre restano buie. |
CLOUDS | script.js | 6 | Quante nuvole attraversano il cielo; 0 lo lascia sgombro. |
SKY_DAWN, SKY_MORNING, SKY_NOON, SKY_SUNSET, SKY_NIGHT | script.js | #e79ea2, #a3d2f1, #73baee, #df727a, #121a47 | I cinque cieli, tre colori ciascuno: in alto, a metà, all’orizzonte. I passaggi fra uno e l’altro si fanno da soli. |
--palazzo-a … --palazzo-d, --palazzo-notte | style.css | #d8c7b0, #1a2048 | I colori dei palazzi davanti di giorno e quello in cui sfumano di notte. |
--luce-calda, --luce-chiara | style.css | #ffd27a, #ffe9b8 | I due colori delle finestre accese e dei lampioni. |
Quando usarla
Per raccontare il tempo che passa: un hotel o una casa vacanza, un’app di meteo o di sonno, un evento che dura un giorno, il programma di un festival, una pagina «la nostra giornata» di uno studio o di un ristorante.
Sul telefono
La stessa giornata con le misure adattate: palazzi più stretti e bassi, finestre più piccole, l’orologio più piccolo in alto a tutta larghezza e l’arco del sole e della luna sotto il testo, così non ci passano sopra.
Con il movimento ridotto
Niente scorre in modo continuo: la giornata va a scatti, un momento alla volta (alba, mattino, mezzogiorno, tramonto, notte), e ogni cambio è una dissolvenza. Le cifre e le righe cambiano in dissolvenza, le finestre si accendono sfumando, le nuvole stanno ferme e gli uccelli non battono le ali.
Trappole
- Un colore del testo a metà strada fra scuro e chiaro non si legge né sul cielo chiaro né sul buio: il testo è scuro o chiaro, scelto confrontando il contrasto delle due tinte col cielo dietro le parole, e il passaggio dura un attimo.
- Le ombre come tanti path separati e semitrasparenti si scuriscono il doppio dove si sovrappongono: si scrivono tutte in un solo path, dentro un gruppo che ha l’opacità.
- Le cifre che rotolano, con lo scorrimento veloce, cambiano più spesso di quanto dura il loro giro: prima di farne entrare una nuova si tolgono quelle ancora in uscita, se no la casella si riempie di cifre.
- Ridisegnare la città a ogni resize fa saltare la scena sul telefono, dove la barra di Safari cambia l’altezza mentre si scorre: il palco è alto 100lvh e si ridisegna solo se cambia la larghezza o l’altezza di più di 120 pixel.
- Un colore dentro uno stile SVG cambiato a ogni fotogramma su centinaia di finestre è lento: i vetri usano fill: var(--vetro) e si cambia una variabile sola.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 10 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.
