Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La vista dall’alto fra le nuvole
Scorri dentro l’anteprima
La pianta di una residenza vista dall’alto, nello stile minimal: due tende si aprono, il titolo esce dalla sfocatura, poi lo scroll tiene ferma la scena e fa scorrere di lato la pianta disegnata a linee sottili, da un’ala all’altra, mentre tre strati di nuvole passano a tre 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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The view from above, through the clouds</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the site plan of a made-up residence, Linden Court, seen from above and drawn in thin lines. Two curtains open,
a title comes out of a blur; then the scroll holds the screen still and moves the plan sideways, from one wing
to the other, while three layers of cloud drift past at three speeds and the title goes back into the blur -->
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<div class="pianta" data-pianta>
<svg class="disegno" data-disegno aria-hidden="true"></svg>
</div>
<canvas class="nuvole" data-nuvole="0" aria-hidden="true"></canvas>
<canvas class="nuvole" data-nuvole="1" aria-hidden="true"></canvas>
<canvas class="nuvole" data-nuvole="2" aria-hidden="true"></canvas>
<h2 class="titolo" data-titolo>View from above</h2>
<p class="nota" data-nota>Linden Court, the site plan</p>
<span class="tenda tenda--sx" data-tenda aria-hidden="true"></span>
<span class="tenda tenda--dx" data-tenda aria-hidden="true"></span>
</div>
</section>
<footer class="fine">
<p>Two wings, one garden between them.</p>
</footer>
<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/gsap@3.15.0/dist/SplitText.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.
17 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 vista dall’alto fra le nuvole» da Animorio e adattala al mio sitoCosa fa
La pianta di Linden Court, una residenza inventata, vista dall’alto come da un aereo. All’arrivo due tende color carta si aprono dal centro e il titolo, View from above, esce lettera per lettera da una sfocatura. Poi, scendendo, la scena resta ferma e la pianta scorre di lato: la strada in basso, l’ala A coi tetti a righe e i pannelli, il giardino coi sentieri e gli alberi tondi, l’ala B, il parcheggio in fondo. Le lettere delle due ali sono in oro. Sopra passano tre strati di nuvole bianche e morbide, più fitte in alto e in basso: lo strato più vicino corre più veloce, quello lontano più piano. Da un terzo della corsa il titolo rimpicciolisce e torna nella sfocatura.
Come funziona
La pianta
La pianta è un SVG largo 2600 e alto 1000, disegnato dallo script in un tracciato solo: rettangoli per le ali e i tetti, righe per le coperture e il parcheggio, due cerchi per ogni albero, curve per i sentieri e il trattino della strada. Sullo schermo è alta quanto la finestra e larga RATIO volte tanto.
La corsa
La parte di pianta che non sta nello schermo è quella da far scorrere. La sezione è alta uno schermo più quella parte per SLOW, come sul sito, e dentro c’è una scena sticky. Una timeline legata allo scroll sposta la pianta da sinistra a destra con power1.inOut, come sul sito, quindi parte e arriva piano; sugli schermi più stretti passa solo la parte di mezzo, dal 15 all’85 per cento, e al telefono dal 22 al 78, come sul sito.
Le nuvole
Ogni strato è un canvas largo il doppio della pianta, dipinto una volta con decine di cerchi bianchi a sfumatura radiale raggruppati in sbuffi, più in alto e in basso che in mezzo. I tre strati fanno strade diverse nello stesso tempo, secondo CLOUD_SPEED: il più vicino va più lontano, e sembra più veloce.
Le tende e il titolo
All’arrivo le due tende vanno da metà schermo a zero in CURTAIN_TIME secondi con power3.inOut. Il titolo è diviso in lettere con SplitText: escono da una sfocatura di TITLE_BLUR pixel, salendo del 15 per cento, una ogni TITLE_STAGGER secondi. Con lo scroll, da un terzo della corsa, il titolo intero si rimpicciolisce a 0,7 e torna sfocato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RATIO | script.js | 2.6 | Quante volte la pianta è più larga che alta. |
SLOW | script.js | 2 | Quanto scroll per ogni pixel di pianta che passa. |
CLOUD_SPEED | script.js | [0.9, 1.15, 1.4] | Quanto corre ogni strato di nuvole rispetto alla pianta. |
CLOUDS | script.js | 26 | Quanti sbuffi di nuvola per strato, per ogni larghezza di pianta. |
TITLE_BLUR | script.js | 10 | Quanto è sfocato il titolo all’inizio e alla fine, in pixel. |
TITLE_STAGGER | script.js | 0.04 | Il distacco fra una lettera e l’altra del titolo. |
CURTAIN_TIME | script.js | 1 | Quanto ci mettono le tende ad aprirsi, in secondi. |
Quando usarla
Per mostrare dall’alto una residenza, un albergo, un villaggio vacanze, un campus o il terreno di un evento: tutto quello che non sta in uno schermo, raccontato con lo scroll. Al posto del disegno ci può stare una foto aerea.
Sul telefono
Uguale: la pianta è alta quanto lo schermo e ne passa la parte di mezzo, come sul sito; il titolo è più piccolo e più in alto.
Con il movimento ridotto
La pianta non scorre e resta centrata; le tende e il titolo arrivano in dissolvenza, e scendendo le nuvole e il titolo svaniscono soltanto.
Trappole
- La lunghezza della sezione va calcolata dalla parte di pianta che non sta nello schermo e rifatta a ogni cambio di misura, con invalidateOnRefresh: con una lunghezza fissa la pianta finisce troppo presto o troppo tardi.
- Ogni strato di nuvole deve essere più largo della strada che fa: lo strato più veloce, se è largo quanto la pianta, finisce prima e lascia un bordo netto.
- Le nuvole vanno dipinte una volta su un canvas a bassa risoluzione e poi solo spostate: ridipingerle a ogni fotogramma costa molto, e tanto sono sfocate.
- Le lettere del titolo entrano col tempo e il titolo intero esce con lo scroll: animare con lo scroll le stesse lettere che entrano col tempo le farebbe litigare.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,2 KB; le librerie: GSAP + ScrollTrigger + SplitText 49 KB, Lenis 5,3 KB.
Collaudo
Provata il 17 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.
