La carta che si scioglie
Scroll, Hover, Immagini
Gratis
Torna alla libreria
Le colonne in controsenso
Scorri dentro l’anteprima
Un muro di locandine in tre colonne: mentre attraversa la finestra, le due esterne salgono e quella in mezzo scende, così le locandine si incrociano. Passando su una locandina salta fuori un biglietto con l’ora, che cresce oltre la sua misura inclinandosi e si posa più storto.
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>Columns going opposite ways</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/gloock@5.3.0/400.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/outfit@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="bar">
<a class="brand" href="#">Night Owl Film Club</a>
<nav class="bar__nav" aria-label="Sections">
<a href="#">Programme</a>
<a href="#">Membership</a>
<a href="#">Find us</a>
</nav>
</header>
<section class="intro">
<p class="intro__kicker">The autumn season</p>
<h1 class="intro__title">Twelve films, one very long night.</h1>
<p class="intro__hint">Scroll down the programme. Point at a poster for its time.</p>
</section>
<!-- the programme: three columns of posters; scrolling, the outer ones go up and the middle one comes down -->
<section class="wall" data-wall>
<div class="columns">
<div class="column" data-column="up"></div>
<div class="column" data-column="down"></div>
<div class="column" data-column="up"></div>
</div>
</section>
<section class="outro">
<h2 class="outro__title">Doors at nine. Bring a blanket.</h2>
<a class="outro__link" href="#">Become a member</a>
</section>
<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.
65 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 «Le colonne in controsenso» da Animorio e adattala al mio sitoCosa fa
La home di un cineclub inventato, Night Owl Film Club, su un fondo notte. Dopo il titolo «Twelve films, one very long night.» c’è il programma: dodici locandine disegnate, con un sole sull’orizzonte, una luna, strisce, montagne, onde, un arco, cerchi e raggi, in dodici coppie di colori, ognuna con il titolo del film. Stanno in tre colonne: mentre il muro attraversa la finestra, le colonne ai lati salgono e quella in mezzo scende, più in fretta all’inizio del percorso e poi più piano, così le locandine si incrociano. In cima e in fondo il muro sfuma. Passando su una locandina salta fuori un biglietto color crema con la sala e l’ora, che cresce un po’ oltre la sua misura inclinandosi e si posa più storto; quando il puntatore se ne va il biglietto rimpicciolisce e torna dritto.
Come funziona
Le locandine
Lo script disegna dodici locandine in SVG, 300 per 420: un fondo, un motivo fra otto, il nome del cineclub e il titolo su due righe in Gloock. Le mette quattro per colonna, con il biglietto dentro ognuna.
Le colonne
Uno ScrollTrigger con scrub va da quando il muro entra dal basso a quando esce dall’alto. Le colonne segnate up prendono lo spostamento in negativo, quella down in positivo; quella che scende parte più in alto di tutto lo spostamento, calcolato dal passo più lungo, così in cima non resta mai un buco.
I passi dello spostamento
Lo spostamento segue i passi dell’originale: a un decimo del percorso 100 pixel, a un quinto 200, poi 100 in più ogni quinto fino a 600. Prima del primo passo le colonne sono già dove dice quel passo. Così per il primo decimo il muro sta fermo, fino a un quinto va al doppio della velocità e poi rallenta; su uno schermo stretto lo spostamento è la metà.
Il biglietto
Al passaggio del puntatore il biglietto parte da scala 0 e, dopo 0,1 secondi, cresce fino a POP[0] inclinandosi di POP[1] gradi in 0,2 secondi, poi si posa a 1 inclinato di POP[2] in 0,1: è il salto delle immagini sulle colonne dei progetti del sito (1,1, 5 e 10 gradi). Quando il puntatore esce rimpicciolisce in 0,4 secondi, sparisce in 0,2 e torna dritto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TRAVEL | script.js | [[0.1, 100], [0.2, 200], [0.4, 300], [0.6, 400], [0.8, 500], [1, 600]] | Quanto si sono spostate le colonne in ogni punto del passaggio: (parte del percorso, pixel). |
NARROW | script.js | 0.5 | Su uno schermo stretto le colonne fanno questa parte dello spostamento. |
SMOOTH | script.js | 0.6 | I secondi che le colonne impiegano a raggiungere lo scorrimento. |
POP | script.js | [1.1, 5, 10] | Il biglietto: la misura a cui cresce prima di posarsi, l’inclinazione mentre cresce, quella a cui si posa (gradi). |
FILMS | script.js | [['Moon Over', 'Pier 9', 'Fri 21:00'], …] | I film: le due righe del titolo e l’ora sul biglietto. |
Quando usarla
Per un programma, un catalogo o un portfolio di copertine: tante immagini dello stesso formato. Con poche immagini le colonne restano vuote; con immagini di formati diversi il muro sembra in disordine.
Sul telefono
Due colonne invece di tre e uno spostamento della metà. Il biglietto compare toccando la locandina e sparisce toccandola di nuovo.
Con il movimento ridotto
Le colonne stanno ferme; il biglietto compare e sparisce in dissolvenza, già inclinato.
Trappole
- La colonna che scende deve partire più in alto di tutto lo spostamento, altrimenti scendendo lascia un buco in cima: il margine lo calcola lo script dal passo più lungo, così segue anche i valori cambiati.
- Prima del primo passo le colonne sono già dove dice quel passo, come sul sito: all’entrata del muro sono già spostate di 100 pixel.
- Il muro taglia quello che sporge: senza una sfumatura in cima e in fondo le locandine si vedono tagliate di netto quando il muro entra ed esce.
Librerie
GSAP 3.15.0, Gloock 5.3.0, Outfit (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,5 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 2 ottobre 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.
