Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Le colonne di colore
Tre colonne a tutta altezza, ognuna del colore di un’erba, con un segno di pennello che si disegna da solo. Passandoci sopra la colonna si allarga e dal suo colore sale la pianta disegnata.
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
Lo schermo è diviso in tre colonne di colore pieno: salvia, lavanda e zafferano. In cima a ognuna un segno nero di pennello calligrafico si disegna da solo, uno dopo l’altro, con lo spessore che cresce dove il tratto scende e si assottiglia dove va di lato; sotto ci sono il nome, una frase con la parola che profuma in corsivo, e un bottone quadrato. Passando col mouse su una colonna, lei si allarga, il suo segno si alza appena, le altre due perdono un po’ di colore, e dal fondo sale la sua pianta disegnata: la salvia con le foglie a coppie e la spiga viola, la lavanda coi suoi steli, il croco dello zafferano con i fili rossi. Lasciandola, la pianta torna nel colore.
Come funziona
Un pennino in trenta righe
Ogni segno è una sola linea SVG. Lo script la misura con getPointAtLength in 120 punti e, per ognuno, sposta un punto a sinistra e uno a destra lungo la normale: lo spessore è largo × (0,12 + 0,88 × sin(πt)^0,55) × (0,42 + 0,58 × |dy|), cioè sottile alle punte e pieno dove il tratto scende, come un pennino tenuto di sbieco. I punti di sinistra e quelli di destra, al contrario, chiudono il contorno.
Disegnare un pieno
Un contorno pieno non si può disegnare con stroke-dashoffset. Il trucco è una maschera: la stessa linea centrale, larga 1,8 volte il pennello, con pathLength 1 e dashoffset che va da 1,02 a 0 in 1,3 secondi con power2.inOut. Scopre il segno pieno man mano che corre, e il bordo di avanzamento è un taglio netto, come il pennello che scende.
La colonna che si allarga
Le colonne sono in flex: 1 1 0, e quella accesa passa a flex-grow 1,5 con una transizione CSS di 0,7 secondi. Le altre prendono filter: saturate(0,72) brightness(0,95). La pianta, sotto al testo, parte da opacity 0, 5% più in basso e scala 1,06, e arriva a posto in 1,1 secondi: sembra salire dal colore e posarsi.
Chi c’è sotto
Invece di pointerenter su ogni colonna, un solo ascoltatore di pointermove sulla finestra chiede quale colonna c’è sotto il puntatore e accende solo quella. Con la tastiera si accende la colonna del bottone che ha il fuoco; al telefono le colonne vanno una sotto l’altra, le piante restano sempre visibili e i segni si disegnano quando la colonna arriva sullo schermo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SEGNI | script.js | 3 segni | La linea di ogni segno, in 120 × 300, e la larghezza del pennello: qualunque linea diventa un tratto calligrafico. |
DISEGNA | script.js | 1.3 | I secondi per disegnare un segno. |
--c | style.css | #A3B596, #A99BD1, #E6A23C | Il colore di ogni colonna. |
flex-grow | style.css | 1.5 | Quanto si allarga la colonna accesa. |
Quando usarla
Per presentare tre linee, tre stagioni, tre servizi o tre caratteri di un prodotto, quando ognuno ha un colore suo e basta un gesto per conoscerli.
Sul telefono
Le colonne vanno una sotto l’altra, alte quasi uno schermo; le piante sono sempre visibili e ogni segno si disegna quando la sua colonna entra nello schermo.
Con il movimento ridotto
I segni sono già disegnati, le colonne non cambiano larghezza e la pianta compare sul posto con una dissolvenza di 150 millesimi.
Trappole
- Per misurare un tracciato con getTotalLength e getPointAtLength, il path deve stare in un SVG del documento: qui c’è un SVG invisibile che fa da righello.
- Con pathLength 1 e stroke-dasharray «1 1» il tratto si ripete ogni 2: spostato di 1,02 per nasconderlo, ne spunta un pezzetto alla fine della linea. Con «1 3» il tratto dopo è lontano; lo spostamento resta 1,02 e non 1, per gli arrotondamenti.
- flex-grow si anima bene solo se le colonne partono da flex-basis 0: con basis auto la larghezza dipende dal testo e la transizione salta.
- Il filtro sulle colonne spente va messo sulle colonne, non sul contenitore, o si spegne anche quella accesa.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Peso: 15 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.
