Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
I capitoli di colore
Una pagina a capitoli con un pannello fermo che cambia colore scorrendo e scrive col pennello il segno di ogni capitolo, mentre a fianco scorrono i momenti, coi disegni un poco più lenti del testo.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.
Il codice di questa animazione è nell’accesso a vita.
L’anteprima resta libera: guardala, rallentala, provala sul telefono.
Accesso a vitaCosa fa
Una giornata all’orto in quattro capitoli: alba, mezzogiorno, tramonto e notte. A destra un pannello alto quanto lo schermo resta fermo: all’inizio di ogni capitolo ci si scrive col pennello un segno (un sole che sorge, un sole pieno, un sole che tramonta, la luna) e sotto compaiono il nome e una frase; alla fine del capitolo il segno si cancella nello stesso verso in cui era stato scritto, e il colore del pannello passa a quello dopo: pesca, lino, corallo, indaco. Di notte il testo diventa chiaro. A sinistra scorrono i momenti della giornata, disegnati: la cesta di zucchine, l’annaffiatoio, il cappello, i pomodori, la lanterna, il cane che dorme. Ogni disegno scorre un poco più piano della sua didascalia, e al primo passaggio sale al suo posto.
Come funziona
Un pannello fermo senza pin
La pagina è una griglia a due colonne e il pannello è l’elemento di destra, con position: sticky, top 0, altezza uguale allo schermo e align-self: start. Resta fermo finché la colonna dei momenti scorre accanto, senza spacer e senza ricalcoli.
Scrivere e cancellare nello stesso verso
Ogni segno è un contorno calligrafico scoperto da una maschera, una linea larga con pathLength 1. Per scriverlo lo stroke-dashoffset va da 1,02 a 0; per cancellarlo non torna indietro ma prosegue fino a −1,02: il tratto visibile scivola oltre la fine della linea, e il segno sparisce dall’inizio, come una traccia che si asciuga.
Una linea del tempo per capitolo
Ogni capitolo ha la sua linea del tempo lunga 1, legata allo scorrimento da quando la sua cima passa il 70% dello schermo a quando ci passa il fondo: fra 0 e 0,3 scrive il segno, a 0,06 fa salire la voce, fra 0,8 e 1 cancella tutti e due. Il colore invece passa in un tween a parte, mentre la cima del capitolo va dal 72% al 38% dello schermo.
Due velocità
Dentro ogni cornice il disegno è ingrandito 1,2 volte e scorre da yPercent 9 a −9 mentre il momento attraversa lo schermo; la didascalia sotto si sposta di una ventina di pixel nell’altro verso. Al telefono il pannello sparisce e al suo posto scende una barra fissa col colore, il segno piccolo e il nome del capitolo, che cambia con un piccolo scatto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CAPITOLI | script.js | 4 capitoli | Per ogni capitolo: nome, colore del pannello, colore del testo e segno (una linea in 200 × 200 e la larghezza del pennello). |
DISEGNI | script.js | 8 disegni | I disegni dei momenti, in SVG 200 × 150: si possono sostituire con fotografie nella stessa cornice. |
min-height del capitolo | style.css | 150% dello schermo | Quanto dura un capitolo: più alto, più scorrimento per ogni colore. |
Quando usarla
Per raccontare una giornata, un processo, le stagioni o le linee di un prodotto, quando ogni tappa ha un colore suo e un segno da ricordare.
Sul telefono
Una colonna sola; il pannello lascia il posto a una barra fissa in alto che scende quando cominciano i capitoli e cambia colore, segno e nome a ogni capitolo.
Con il movimento ridotto
I segni non si scrivono e i disegni non scorrono a velocità diverse: a ogni capitolo il pannello cambia colore, segno e voce con una dissolvenza di due decimi.
Trappole
- Per un elemento sticky dentro una griglia serve align-self: start, o la cella si allunga quanto la riga e l’elemento non ha spazio per restare fermo.
- Quando più ScrollTrigger animano lo stesso colore, usa fromTo con i colori di partenza e di arrivo scritti, e immediateRender: false: così l’ordine in cui si aggiornano non conta.
- Per cancellare un tratto nello stesso verso in cui è stato scritto, lo stroke-dashoffset va portato in negativo, non riportato a 1; e il dasharray deve essere «1 3», non «1 1», o a −1,02 e a 1,02 spunta un pezzetto del tratto successivo.
- Il disegno che scorre dentro la sua cornice deve essere più grande della cornice, o si vedono i bordi.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Peso: 24 KB dei nostri file.
Collaudo
Provata il 27 settembre 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.
