Lo sfondo delle onde d’interferenza allo scroll
Scroll, Sfondi
NuovaGratis
Torna alla libreria
Lo sfondo a carta millimetrata
Scorri dentro l’anteprima
Uno sfondo animato per una pagina che scorre: un foglio di carta millimetrata nel suo arancio mattone, fissato ai bordi dietro alla pagina. Quando si scorre il centro del foglio resta indietro e le righe si incurvano come carta tirata, più quanto più si scorre veloce; quando ci si ferma tornano dritte su una molla. Ogni tanto un'onda morbida lo attraversa. Stile minimal.
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>Quire</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/martian-mono@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: a sheet of graph paper on a canvas behind the page, pinned at its edges; when the page scrolls the
sheet lags behind and sags like paper, then springs back, and now and then a soft swell runs down it -->
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<main class="pagina" data-pagina>
<header class="testa">
<p class="marchio">Quire</p>
<p class="testa__nota">Paper goods</p>
</header>
<section class="eroe" data-calma>
<div class="blocco">
<p class="occhiello" data-entra>Notebooks for people who draw</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Paper that keeps</span></span>
<span class="riga"><span class="riga__dentro" data-riga>its measure.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="Shop notebooks">Shop notebooks</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
</a>
</div>
</div>
</section>
<section class="seconda" data-calma>
<div class="blocco">
<p class="occhiello" data-dopo>Ruled in one millimetre</p>
<h2 class="sotto">
<span class="riga"><span class="riga__dentro" data-dopo-riga>Ninety grams,</span></span>
<span class="riga"><span class="riga__dentro" data-dopo-riga>sewn by hand.</span></span>
</h2>
</div>
</section>
</main>
<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="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.
24 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 «Lo sfondo a carta millimetrata» da Animorio e adattala al mio sitoCosa fa
Una pagina che scorre per due schermate, il fondo di una cartoleria inventata, Quire. Dietro a tutto, su un canvas fisso, un foglio di carta millimetrata bianco caldo: righe di un millimetro sottilissime, più forti ogni cinque e ancora di più ogni dieci, tutte nel loro arancio mattone, l'unico colore oltre all'inchiostro. Nella prima schermata il titolo: Notebooks for people who draw, poi due righe in Martian Mono stretto (Paper that keeps its measure.) e una pillola nera (Shop notebooks) con la freccia; in alto il marchio e Paper goods. Nella seconda, più piccolo: Ruled in one millimetre e Ninety grams, sewn by hand., che salgono quando arrivano sullo schermo. Le righe scorrono con la pagina come se ci fossero stampate sopra; ma il foglio è fissato ai bordi, e quando si scorre il centro resta un poco indietro: le orizzontali si incurvano a conca e le verticali si stringono verso il mezzo, come carta tirata, più quanto più si scorre veloce. Quando ci si ferma il foglio torna dritto su una molla, va un filo oltre e si posa. Ogni sette secondi un'onda morbida scende dall'alto in basso e increspa le righe al suo passaggio. Dietro alle scritte la quadrettatura si schiarisce in ovali morbidi. All'apertura le righe vengono tirate una dopo l'altra, come col tiralinee: prima le orizzontali dall'alto, poi le verticali da sinistra; le righe del titolo salgono stringendosi e prendendo peso.
Come funziona
Il foglio fisso, le righe che scorrono
Il canvas è fisso, alto 100lvh (così su Safari per iPhone non cambia misura quando compare la barra). A ogni fotogramma le orizzontali si ridisegnano a n·MILLIMETRO − scrollY, quindi scorrono con la pagina; ogni quinta e ogni decima riga vanno in un Path2D a parte, più forte. Le verticali restano ferme e centrate. Se scorrimento, molla e onda non sono cambiati, il fotogramma non si ridisegna.
La conca del foglio fissato ai bordi
Lo spostamento di un punto è S · sin(πx/W) · sin(πy/H) in verticale e un sesto di S · sin(2πx/W) · sin(πy/H) in orizzontale: zero sui bordi, il massimo nel mezzo. Le righe si disegnano come spezzate con un punto ogni 14 px, spostato così.
La molla spinta dallo scorrimento
Sul ticker di GSAP si misura la velocità di scorrimento (scrollY nuovo meno vecchio, diviso il tempo) e la si ammorbidisce un poco. S vuole essere velocità · PIEGA, al massimo PIEGA_MAX px, e la raggiunge su una molla (MOLLA): quando lo scorrimento si ferma, S torna a zero con un filo di troppo e il ritorno.
L'onda e le zone calme
Una timeline in ripetizione ogni ONDA secondi porta un fronte dall'alto in basso; lo spostamento dell'onda è un seno per una campana intorno al fronte, ALTEZZA_ONDA px. Le scritte (i blocchi delle due sezioni e la testata) si misurano nella misura della pagina e, a ogni fotogramma, una gomma ovale (destination-out con un gradiente radiale) schiarisce la quadrettatura dietro a loro, di CALMA.
Il tiralinee e le scritte
All'apertura ogni riga orizzontale si allunga da sinistra con un ritardo che cresce dall'alto in basso, poi le verticali dall'alto con un ritardo da sinistra a destra. Le righe del titolo salgono con back.out mentre font-stretch passa da 112% a 75%; quelle della seconda sezione partono con ScrollTrigger.create quando la sezione arriva al 70% dello schermo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MILLIMETRO | script.js | 7 | La distanza fra due righe sottili, in px (le forti ogni cinque e ogni dieci). |
PIEGA | script.js | 0.07 | Quanto si incurva il foglio per ogni px al secondo di scorrimento. |
PIEGA_MAX | script.js | 46 | Quanto si incurva al massimo, in px. |
MOLLA | script.js | [90, 9] | La molla del foglio: quanto è rigida e quanto è frenata (meno frenata, più oscilla). |
ONDA | script.js | 7 | Ogni quanti secondi passa l'onda. |
ALTEZZA_ONDA | script.js | 12 | Quanto è alta l'onda, in px. |
CALMA | script.js | 0.88 | Quanto si schiarisce la quadrettatura dietro alle scritte (0 per niente, 1 sparisce). |
Quando usarla
Come fondo di una pagina lunga di una cartoleria o di un marchio di quaderni, di uno studio di architettura o di ingegneria, di un corso di disegno tecnico, di un'app di appunti o di un prodotto per progettisti; in generale dietro a titoli corti quando si vuole che la pagina sembri un foglio vero che reagisce allo scorrimento. I tre arancioni si cambiano nel CSS (con un azzurro diventa la carta da disegno inglese).
Sul telefono
Le stesse animazioni a misure adattate: le righe sono un poco più fitte, i titoli più piccoli. Il dito che scorre incurva il foglio come la rotella, e l'inerzia dello scorrimento lo tiene curvo finché la pagina non si ferma.
Con il movimento ridotto
Il foglio è dritto e fermo: le righe scorrono solo con la pagina, senza conca, senza molla, senza onda e senza tiralinee. Le scritte compaiono in dissolvenza, quelle della seconda sezione quando arrivano sullo schermo.
Trappole
- Con le righe forti quasi piene la quadrettatura copriva il titolo e la pagina sembrava arancione: righe più leggere, e gomme ovali dietro alle scritte.
- Il fondo bianco dietro alle scritte della testata faceva delle etichette incollate sul foglio: ora anche la testata ha la sua gomma morbida.
- Ridisegnare ventimila segmenti a ogni fotogramma anche a pagina ferma costava per niente: una firma fatta di scorrimento, molla, onda e apertura dice quando c'è davvero da ridisegnare.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Martian Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,4 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 19 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.
