Lo sfondo di fili come un tessuto
Sfondi, Hover
NuovaGratis
Torna alla libreria
Lo sfondo a fasce da manifesto
Uno sfondo animato da mettere dietro a un titolo o a una sezione: cinque forme grandi e piatte come in un manifesto stampato, un disco vermiglio, una fascia e un mezzo disco neri, un rettangolo sabbia e un filo. Ogni pochi secondi scivolano in una composizione nuova, uno strato dopo l'altro, ognuna sulla sua molla, e si spostano un poco col puntatore come strati in parallasse; il titolo resta sempre sulla carta. 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>Plakat</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the background: five big flat shapes on a canvas behind the page, like a printed poster; every few seconds they
slide into a new composition on springs, one layer after the other, and they lean a little with the pointer -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Plakat</p>
<p class="testa__nota">Poster gallery</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>A season of printed posters</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Flat colour,</span></span>
<span class="riga"><span class="riga__dentro" data-riga>loud ideas.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="Book a ticket">Book a ticket</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>
</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.
19 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 fasce da manifesto» da Animorio e adattala al mio sitoCosa fa
Una pagina intera color carta, il fondo di una galleria di manifesti inventata, Plakat. Dietro a tutto, su un canvas, cinque forme grandi e piatte come in un manifesto stampato: un disco vermiglio, una fascia nera e un mezzo disco nero, un rettangolo color sabbia e un filo nero sottile. In basso a sinistra il titolo: A season of printed posters, poi due righe in Anybody stretto e pieno (Flat colour, loud ideas.) e una pillola nera (Book a ticket) con la freccia; in alto il marchio e Poster gallery. Le forme stanno in una composizione per tre secondi e mezzo, respirando appena; poi scivolano tutte in una composizione nuova, una dopo l'altra dal fondo in su, ognuna sulla sua molla, il disco per ultimo con un filo di elastico in più, e ruotano mentre si spostano. Le composizioni sono tre e poi si ricomincia uguale, quindici secondi in tutto; sul telefono, con la pagina alta, le tre composizioni sono rifatte per stare sopra al titolo. Le forme si spostano un poco col puntatore, di più quelle più vicine (il disco e il mezzo disco) e quasi niente il filo, come strati in parallasse. Intorno al titolo e alle scritte della testata c'è un margine di carta che le forme non attraversano mai: se ci passano, lì vengono tagliate come dal bordo di stampa. All'apertura le forme si stampano una dopo l'altra con un piccolo rimbalzo e le righe del titolo salgono dalla loro finestra stringendosi da larghe a strette.
Come funziona
Le forme e le composizioni
Ogni forma è un piccolo oggetto con posizione (frazioni della pagina), misure (frazioni del lato più corto), angolo e scala; le tre composizioni sono tre tabelle di questi numeri, una versione per la pagina larga e una per quella alta. Un canvas a tutta pagina (devicePixelRatio limitato a 2) le disegna in ordine dal fondo: rettangolo, fascia, filo, mezzo disco, disco.
Il giro delle composizioni
Una timeline GSAP in ripetizione dura tre volte TIENI + CAMBIA. A ogni cambio, dopo TIENI secondi, ogni forma va alla composizione successiva in CAMBIA secondi con back.out (il disco un poco di più), sfalsata di SFALSA secondi dalla precedente; la terza riporta alla prima, così il giro si chiude uguale. I valori di arrivo sono funzioni, così se la pagina passa da larga ad alta a metà giro le forme saltano alla composizione giusta e la timeline si rilegge.
Il respiro e la parallasse
Nel disegno ogni forma si sposta di RESPIRO pixel su seni della fase del giro (giri interi, quindi tornano uguali) e di PARALLASSE pixel per la sua profondità nella direzione del puntatore, che il punto segue su una molla morbida; quando il puntatore esce, torna al centro.
Il margine di carta
Si misurano il blocco del titolo e le due scritte della testata e il canvas si ritaglia con un percorso a regola evenodd: tutta la pagina meno i rettangoli intorno alle scritte (MARGINE pixel per il titolo, 12 per la testata). Le composizioni sono disegnate per stare lontane dal titolo; il ritaglio è la rete di sicurezza, e dove serve si legge come il bordo di stampa.
L'apertura e la pausa
All'apertura la scala di ogni forma va da 0 a 1 con back.out, una ogni 0,12 secondi, e le righe del titolo salgono con back.out mentre font-stretch passa da 130% a 78%. Il giro parte solo a apertura finita; IntersectionObserver e visibilitychange lo fermano, col ticker, quando la pagina non si vede.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TIENI | script.js | 3.4 | Quanti secondi resta ferma ogni composizione. |
CAMBIA | script.js | 1.5 | In quanti secondi le forme passano alla composizione successiva. |
SFALSA | script.js | 0.11 | Quanti secondi fra una forma e l'altra, quando cambiano. |
MOLLA | script.js | 1.25 | Quanto vanno oltre prima di posarsi: 1 niente, 2 tanto. |
PARALLASSE | script.js | 22 | Di quanti px si spostano col puntatore le forme più vicine. |
RESPIRO | script.js | 6 | Di quanti px respirano le forme fra un cambio e l'altro. |
MARGINE | script.js | 28 | Quanti px di carta restano intorno al titolo, che le forme non attraversano. |
Quando usarla
Come fondo della prima schermata di una mostra, di una galleria, di un festival di grafica o di musica, di una tipografia o di uno studio di design; in generale dietro a un titolo corto quando si vuole una pagina che si fa notare come un manifesto. I quattro colori si cambiano nel CSS, le composizioni nelle tabelle in cima allo script.
Sul telefono
Le stesse animazioni con tre composizioni rifatte per la pagina alta: le forme stanno nella parte di sopra e il titolo, più piccolo, resta in basso sulla carta. Il dito sposta gli strati mentre tocca e trascina.
Con il movimento ridotto
Resta la prima composizione, ferma: niente cambi, niente respiro, niente parallasse. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- Con la fascia e il filo lunghi quanto la pagina, la fascia passava sotto il titolo e il ritaglio lasciava intorno alle parole un riquadro di carta che sembrava una scatola: ora fascia e filo hanno una lunghezza e le composizioni li tengono lontani dal titolo.
- In due composizioni la fascia e il mezzo disco, tutti e due neri, si toccavano e diventavano una forma sola (un martello, una lettera h): le posizioni sono state spostate perché fra le forme dello stesso colore resti sempre carta.
- Le scritte della testata finivano sotto il disco o la fascia: anche loro hanno un piccolo margine che le forme non attraversano.
- Il giro poteva partire prima che le forme fossero misurate (l'IntersectionObserver risponde prima che i caratteri siano pronti): parte solo a apertura finita.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,1 KB; le librerie: GSAP 28 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.
