Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
L'intestazione col sacco della palestra di boxe
L'intestazione di una palestra di boxe inventata, Ironjaw, nello stile ricco: davanti a un muro di mattoni, sotto una trave d'acciaio, un sacco da pugile di cuoio rosso pende dalla sua catena e dalle cinghie e dondola con la fisica vera. Un tocco fa partire un guantone che lo colpisce all'altezza giusta: il sacco si schiaccia, ruota, oscilla, la polvere esce dal cuoio, i guantoni appesi al gancio ballano e, ai colpi forti, suona la campana del ring.
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 boxing gym heavy bag</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="gym" data-gym>
<!-- the header of a made-up boxing club, Ironjaw: a brick wall under a steel beam, a red leather heavy bag hanging
from its chain and straps, a pair of gloves on a hook, the ring bell, the round clock and a corner of the ring.
The bag swings with real physics: brush it with the pointer to push it, tap anywhere to throw a punch at it -->
<canvas class="gym__back" data-back aria-hidden="true"></canvas>
<canvas class="gym__canvas" data-canvas role="img" aria-label="A boxing gym: a red leather heavy bag hangs from a chain under a steel beam in front of a brick wall, with a pair of blue gloves on a hook, a brass ring bell, a round clock and the corner of a ring. Tap to throw a punch at the bag."></canvas>
<header class="gym__bar">
<span class="gym__brand"><span class="gym__brand-mark" aria-hidden="true"></span>Ironjaw</span>
<span class="gym__hours">Boxing club · open six till ten</span>
</header>
<section class="gym__copy">
<p class="gym__kicker" data-in>Classes for every level</p>
<h1 class="gym__title" aria-label="Hit harder. Breathe easier.">
<span class="gym__line"><span data-line>Hit harder.</span></span>
<span class="gym__line"><span data-line>Breathe <em>easier.</em></span></span>
</h1>
<p class="gym__lede" data-in>Bag work, pads and skipping in a brick gym under the railway arches.</p>
<a class="gym__button" href="#trial" data-button><span class="gym__button-tape" aria-hidden="true"></span><span class="gym__button-text">Book a trial class</span></a>
</section>
<p class="gym__hint" data-hint>Tap to throw a punch</p>
<p class="sr-only" aria-live="polite" data-said></p>
</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.
32 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 «L'intestazione col sacco della palestra di boxe» da Animorio e adattala al mio sitoCosa fa
Ironjaw è un club di boxe sotto gli archi della ferrovia. Il muro è di mattoni blu notte, ognuno col suo spessore, con la luce calda della lampada dietro al sacco; in alto corre una trave d'acciaio coi bulloni, in basso il pavimento di legno a doghe col battiscopa e il tappeto di gomma. Dalla staffa sulla trave scende una catena ad anelli alternati, poi l'anello girevole, quattro cinghie con gli anelli a D e il sacco: cuoio rosso coi pannelli cuciti, le fasce scure in cima e in fondo, il nastro giallo col nome della palestra avvolto un po' storto, il cuoio consumato dove si picchia di più. A destra il gancio con un paio di guantoni blu appesi ai lacci, la campana d'ottone col martelletto e l'orologio del round che conta i tre minuti; in basso a sinistra l'angolo del ring con il paletto imbottito e le tre corde. Un tocco o un clic fa partire un guantone rosso dal lato giusto: arriva con una frenata, colpisce all'altezza del dito e torna indietro. Il sacco si schiaccia e si ammacca dove è colpito, ruota e dondola sulla catena, il cuoio sbuffa polvere, partono i segni del colpo, i guantoni appesi ballano e ai ganci forti la campana suona. Col mouse, sfiorare il sacco lo spinge. Lasciato solo, ogni tanto qualcuno tira una serie: due diretti e un gancio dall'altra parte.
Come funziona
Due canvas
Il muro, la trave, il pavimento, l'angolo del ring, il gancio, la piastra della campana e la cornice dell'orologio cambiano solo con la misura: si disegnano una volta su un canvas di fondo. Sopra, a ogni fotogramma: l'ombra del sacco, l'orologio, la campana, la catena, le cinghie, il sacco, i guantoni appesi, il guantone che colpisce e la polvere.
La fisica a punti
Un punto fermo sulla staffa, un punto per ogni anello della catena, l'anello girevole e il sacco come due punti pesanti, sopra e sotto. A ogni passo (1/120 di secondo) ogni punto continua col movimento che aveva e cade un poco; poi sedici giri di vincoli rimettono le distanze. La catena e le cinghie tirano solo quando sono tese, il sacco invece è rigido in tutte e due i versi.
Il colpo
Un colpo sposta indietro la posizione precedente dei due punti del sacco: è come dargli velocità. Il punto più vicino a dove arriva il pugno ne prende di più, così un colpo in basso fa ruotare il sacco oltre che spostarlo. Intanto il sacco si allarga e si accorcia un poco e si ammacca con un'ombra dove è stato colpito; tutte e due le cose tornano a posto con un decadimento esponenziale.
Il guantone
Arriva in 0,13 secondi con una frenata (una cubica), sta fermo sei centesimi sul sacco e torna in 0,24. Parte dal lato del sacco dove si è toccato e colpisce all'altezza del dito, fra il 16 e l'82 per cento del sacco. Il colpo vero parte quando il guantone tocca, non al clic.
I dettagli che reagiscono
La polvere sono briciole con la loro gravità e il loro attrito che si spengono; i segni del colpo sono cinque righe che si allontanano. I guantoni appesi sono due pendoli corti che ricevono una spinta a ogni colpo e dal puntatore che passa; la campana trema e il martelletto batte quando il colpo è più forte di un diretto.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PUNCH | script.js | 1 | Quanto forte colpisce il guantone. |
PUSH | script.js | 1 | Quanto il mouse che sfiora il sacco lo spinge (0 niente). |
GRAVITY | script.js | 1 | La gravità: più alta, il sacco oscilla più svelto. |
DAMPING | script.js | 0.5 | Quanto frena l'aria: più alto, il sacco smette prima di dondolare. |
AUTO_EVERY | script.js | 2.6 | Secondi fra una serie di colpi e l'altra quando nessuno tocca. |
DUST | script.js | 18 | Le briciole di polvere a ogni colpo. |
LINKS | script.js | 7 | Gli anelli della catena. |
--bag, --tape, --wall… | style.css | rosso, giallo, blu notte | I colori in :root: il canvas li rilegge da solo quando cambiano. |
Quando usarla
Per l'intestazione di una palestra di boxe, di kickboxing o di arti marziali, di una palestra di quartiere, di un personal trainer, di un negozio di attrezzi sportivi o di un'app di allenamento. È un gioco: orari e prezzi veri vanno anche in testo normale.
Sul telefono
Stessa fisica e stesso disegno, misure adattate: la scritta in alto a sinistra, il sacco a destra, i guantoni appesi più in basso; campana e orologio solo dove c'è spazio. Il dito tocca e il guantone parte; la pagina scorre normalmente.
Con il movimento ridotto
Il sacco sta fermo, dritto sulla catena, e nessun guantone parte: un tocco fa solo comparire e svanire l'ombra del colpo. Le scritte entrano in dissolvenza.
Trappole
- Con la catena rigida in tutti e due i versi il sacco rimbalza in su come su una molla: la catena e le cinghie devono tirare solo quando sono tese.
- Il colpo va dato quando il guantone tocca il sacco, non al clic: se no il sacco parte prima che arrivi il pugno.
- Passo fisso: con il tempo vero del fotogramma la catena trema quando il telefono rallenta.
- Al cambio di misura i punti vanno scalati attorno alla staffa, se no il sacco salta a metà dondolio.
- Il fondo si ridisegna solo al cambio di misura o di colori: i mattoni a ogni fotogramma costano tanto sul telefono.
Librerie
GSAP 3.15.0, Big Shoulders Display (font variabile) 5.3.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
