Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
La card che si sfoglia come una pagina
Nello stile minimal, su bianco: la card di un concerto da camera stampata come la pagina di un programma, con l’angolo in basso a destra piegato a orecchia. Col puntatore vicino l’angolo si solleva verso di lui come una pagina che si sta per girare, con la piega vera, l’ombra che si allunga e il retro della carta più chiaro; al clic la pagina si gira tutta e sotto c’è l’interno, col programma e il pulsante per prenotare.
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>The card that turns like a page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the card of an evening concert, printed like the page of a programme. Its bottom right corner is a little
dog-eared; with the pointer near it the corner lifts towards the pointer like a page you are about to turn,
and a click turns the whole page over: underneath is the inside, with the programme and the button to book.
The front is the page cut along the fold, the flap is the same page reflected across the fold and seen from
the back, and the inside waits underneath -->
<article class="card" aria-labelledby="ev-title" data-card>
<!-- the inside, revealed by the turn -->
<section class="inside" id="ev-inside" data-inside aria-hidden="true">
<p class="label" data-in>Programme</p>
<ol class="programme">
<li data-in><span class="who">Haydn</span><span class="what">Quartet in G, Op. 77</span></li>
<li data-in><span class="who">Janáček</span><span class="what">Intimate Letters</span></li>
<li data-in><span class="who">Ravel</span><span class="what">Quartet in F</span></li>
</ol>
<p class="note" data-in>About 95 minutes, with one interval. 38 seats left.</p>
<div class="actions" data-in>
<a class="pill" href="#book" data-book><span class="pill__fondo"></span><span class="pill__testo">Book a seat</span></a>
<button class="back" type="button" data-back tabindex="-1">
<svg viewBox="0 0 16 10" aria-hidden="true"><path d="M15 5H2M5.5 1.2 1.6 5l3.9 3.8" /></svg>
<span>Back</span>
</button>
</div>
<span class="inside__shade" data-inside-shade aria-hidden="true"></span>
</section>
<!-- the front page, clipped along the fold -->
<button class="front" type="button" data-front data-autoclic aria-expanded="false" aria-controls="ev-inside">
<span class="front__body">
<span class="label">Quillon Hall <span class="sep">/</span> Concerts</span>
<span class="title" id="ev-title" data-title>Late<br>Quartets</span>
<span class="rule" aria-hidden="true"></span>
<span class="meta">
<span class="date">Thu 12 Nov, 20:30</span>
<span class="place">Room B, second floor</span>
</span>
<span class="hint">Turn the page</span>
</span>
<span class="front__shade" data-front-shade aria-hidden="true"></span>
</button>
<!-- the back of the front page, folded over: the same paper reflected across the fold -->
<span class="flapwrap" aria-hidden="true">
<span class="flap" data-flap>
<span class="flap__ghost">
<span class="label">Quillon Hall <span class="sep">/</span> Concerts</span>
<span class="title">Late<br>Quartets</span>
</span>
<span class="flap__shade" data-flap-shade></span>
</span>
</span>
</article>
</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.
41 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 «La card che si sfoglia come una pagina» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una card alta come una pagina di programma: in alto, piccolo, «Quillon Hall / Concerts», poi in basso il titolo grande in Fraunces, «Late Quartets», una riga sottile, la data in vermiglio, l’unico colore, la sala in grigio e una riga piccola che dice di girare la pagina. L’angolo in basso a destra è piegato a orecchia di pochi pixel. Col puntatore sulla card l’angolo si solleva su una molla, passa un poco e si posa; se il puntatore va vicino all’angolo, l’angolo lo segue come se lo si prendesse fra le dita. La piega è vera: la pagina è tagliata lungo la linea della piega e il pezzo piegato è la stessa pagina rovesciata, vista dal retro, più chiara, con la stampa che traspare appena al contrario; lungo la piega c’è un filo di luce sulla curva della carta, sotto l’ombra che si allunga quanto più l’angolo si alza, e il titolo prende peso e perde la sua morbidezza. Al clic l’angolo va verso sinistra lungo un arco e la pagina si gira tutta, sparendo oltre il dorso; sotto c’è l’interno, un foglio appena più scuro col programma della serata (tre compositori, una riga ciascuno), la durata, i posti rimasti e due azioni: la pillola vermiglia «Book a seat» e «Back», che gira la pagina al contrario.
Come funziona
Un punto, una piega
L’angolo della pagina è un punto M su una molla. La piega è l’asse fra l’angolo vero C e M: il punto di mezzo e la direzione da M a C. Tutto il resto viene da lì, a ogni fotogramma.
La pagina tagliata
Il davanti è la card tagliata dal lato della piega lontano dall’angolo: un ritaglio del rettangolo contro un semipiano (Sutherland-Hodgman), scritto come clip-path in pixel. Il pezzo dall’altra parte è il lembo.
Il lembo riflesso
Il lembo è un livello grande come la card, col colore del retro della carta, tagliato sullo stesso pezzo e poi riflesso attraverso la piega con una matrice: matrix(1 − 2nx², −2nxny, −2nxny, 1 − 2ny², 2(Q·n)nx, 2(Q·n)ny). Così si trova esattamente sopra il davanti, e la stampa che traspare è al contrario come su una carta sottile.
Le ombre lungo la piega
Tre gradienti lineari messi lungo la piega, con le fermate in pixel dalla linea: l’ombra sul davanti, l’ombra del lembo sull’interno e la curva del lembo, scura sulla piega, poi un filo di luce, poi il colore della carta. Crescono con quanto è alzato l’angolo. Sopra il lembo un drop-shadow lo stacca dalla pagina.
La carta ha un dorso
La pagina è fissata sul lato sinistro: l’angolo non può andare più lontano dal dorso di quanto la carta è larga, né dall’angolo in alto più della diagonale. M è rimesso dentro questi due cerchi a ogni passo, così la piega resta da carta e non si strappa.
Girare la pagina
Il clic porta M lungo un arco fino oltre il dorso in TURN secondi con power2.inOut, alzandolo di ARC dell’altezza a metà strada; il lembo svanisce quando passa il dorso, e a metà giro le righe dell’interno salgono una dopo l’altra. Il ritorno fa lo stesso arco al contrario e lascia M alla molla con la sua velocità, che lo posa con un piccolo rimbalzo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
REST | script.js | 18 | Quanto è grande l’orecchia a riposo, in pixel. |
LIFT | script.js | 74 | Quanto si alza l’angolo col puntatore sulla card, in pixel. |
REACH | script.js | 150 | Quanto vicino all’angolo deve arrivare il puntatore perché l’angolo lo segua, in pixel. |
TURN | script.js | 1.05 | Quanto dura un giro intero della pagina, in secondi. |
ARC | script.js | 0.2 | Quanto si alza l’angolo mentre la pagina gira, in parte dell’altezza della card. |
STIFFNESS | script.js | 190 | Quanto è rapida la molla dell’angolo. |
DAMPING | script.js | 0.58 | Lo smorzamento della molla: con 1 arriva senza passare, più basso passa di più. |
SHADE | script.js | 0.2 | Quanto sono scure le ombre lungo la piega. |
WEIGHT | script.js | [380, 540] | Il peso del titolo a riposo e con l’angolo alzato. |
Quando usarla
Per la card di un evento, di un corso o di un prodotto che ha qualcosa da dire sul retro: il concerto col suo programma, il corso col calendario delle lezioni, il vino con la scheda di degustazione. Funziona dove un clic in più per vedere i dettagli è un piacere e non una fatica.
Sul telefono
La card si stringe a 82 centesimi dello schermo e la sua altezza si misura anche sull’altezza della finestra, così sta nella casella. Senza puntatore l’angolo resta a orecchia; il tocco gira la pagina e «Back» la rigira. Il lembo svanisce quando passa il dorso, quindi non esce mai dallo schermo.
Con il movimento ridotto
L’angolo resta piegato a orecchia e non si muove; il clic passa dal davanti all’interno con una dissolvenza, e le righe compaiono senza salire.
Trappole
- Il lembo riflesso si posa esattamente sul davanti solo se la sua transform-origin è 0 0: con l’origine al centro la matrice di riflessione andrebbe corretta della metà della card.
- clip-path taglia anche le ombre: il drop-shadow del lembo sta su un contenitore senza clip-path, che lo disegna attorno a quello che resta del figlio già tagliato.
- Senza il dorso l’angolo può andare dove vuole e la piega attraversa la card in modi che la carta non fa: M si rimette dentro i due cerchi della carta a ogni passo.
- Il lembo, girando, va oltre il lato sinistro della card: svanisce mentre passa il dorso e il palco ha overflow hidden, così sul telefono non esce di lato.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
