Le colonne di colore
Hover, SVG
NuovaGratis
Torna alla libreria
L'intestazione col cruscotto della scuola di volo
L'intestazione di una scuola di volo inventata, Skyward, nello stile ricco: sotto il titolo c'è la cabina di un piccolo aereo da addestramento, col parabrezza sul cielo, i campi e la pista, il muso rosso con l'elica, la bussola sul montante e il cruscotto con i sei strumenti, l'orologio, il carburante, gli interruttori e la manetta. Il puntatore, o il dito, è la cloche: a destra e a sinistra l'aereo vira, in su e in giù cabra e picchia, e tutto il cruscotto risponde. Un tocco su un interruttore lo scatta, un tocco altrove dà tutto gas.
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 flight school cockpit header</title>
<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="stage" data-stage>
<!-- the flight school cockpit header: the hero of a made-up flight school. Above, the words and the booking button;
below, the cockpit of a little training plane: the windshield with the sky, the fields and the runway, the red
cowling and the propeller, the whiskey compass on the post, and the instrument panel with its six round dials,
the clock, the fuel gauges, the toggle switches and the throttle. The pointer (or a finger) is the yoke: left and
right bank the plane, up and down pitch the nose, and every dial answers. A tap on a switch flips it, a tap
anywhere else pushes the throttle -->
<header class="hero" data-hero>
<div class="hero__words">
<p class="hero__eyebrow" data-in>Skyward Flight School</p>
<h1 class="hero__title" data-in>Take the <em>controls.</em></h1>
<p class="hero__sub" data-in>Your first lesson starts on the ground and ends above the clouds. Move to fly, tap a switch, tap anywhere for full throttle.</p>
</div>
<a class="hero__cta" href="#" data-in data-cta><span>Book a trial flight</span></a>
</header>
<div class="cockpit" data-cockpit>
<svg class="cockpit__svg" data-svg viewBox="0 0 1200 760" preserveAspectRatio="xMidYMax meet" role="img" aria-label="The cockpit of a small training plane: the windshield with the sky and the runway, and the instrument panel"></svg>
</div>
</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.
27 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 cruscotto della scuola di volo» da Animorio e adattala al mio sitoCosa fa
Skyward è una scuola di volo. In alto la scritta, «Take the controls.», e il pulsante per prenotare un volo di prova; sotto, la cabina di un piccolo aereo ad ala alta vista dal posto di sinistra. Dal parabrezza si vedono il cielo col sole e qualche nuvola che passa, le montagne all'orizzonte, i campi a toppe, un fiume, una strada e la pista dritta davanti; più vicino il muso rosso col bordo crema e le viti, l'ogiva lucida e il disco sfocato dell'elica. Sul montante è appesa la bussola, con la sua rosa di numeri che scorre. Il cruscotto è grigio azzurro, verniciato, coi rivetti e i segni delle mani, il parapolvere scuro con la cucitura, e porta i sei strumenti classici, ognuno sulla sua piastra con quattro viti, la ghiera e il vetro col riflesso: l'anemometro con gli archi bianco, verde, giallo e la riga rossa, l'orizzonte artificiale con la scala di beccheggio e la scala di inclinazione, l'altimetro a due lancette con la finestrella della pressione, il coordinatore di virata con l'aeroplanino e la pallina nel tubo, la girobussola e il variometro. A sinistra l'orologio e il carburante, a destra la manetta, la miscela rossa e la targa con la sigla; in alto cinque interruttori a levetta; davanti la cloche. Il puntatore, o il dito che tocca e trascina, è la cloche: a destra e a sinistra l'aereo vira, in su e in giù il muso sale e scende. L'orizzonte gira e sale nel parabrezza e nell'orizzonte artificiale, la cloche ruota e si avvicina, la girobussola e la bussola girano con la virata, l'altimetro sale o scende, l'anemometro cala in salita, il variometro segue il muso, l'aeroplanino si inclina e la pallina scivola. Un tocco su un interruttore lo scatta con un rimbalzo; un tocco altrove dà tutto gas per qualche secondo: la manetta va avanti, l'elica gira più forte, il cruscotto vibra e la velocità sale. All'entrata gli strumenti fanno il loro controllo, con le lancette fino a fondo scala e indietro, e gli interruttori si accendono uno dopo l'altro. Lasciato solo, l'aereo fa da sé virate dolci.
Come funziona
Un SVG solo, scritto dallo script
La cabina è un unico SVG di 1200 per 760 unità, costruito da stringhe: il mondo dietro il parabrezza (cielo, montagne, campi che convergono sull'orizzonte, pista, alberi, nuvole), il muso con l'elica, la cornice e la bussola, il cruscotto coi rivetti, le sei facce degli strumenti, l'orologio, il carburante, gli interruttori, la manetta e la cloche. Le parti che si muovono hanno un attributo data e si muovono cambiando il loro transform.
La cloche e la molla
Il puntatore dà l'inclinazione e il beccheggio voluti, fino a BANK_MAX e PITCH_MAX gradi. A ogni fotogramma l'aereo li raggiunge con un avvicinamento esponenziale (1 meno e alla meno dt per RESPONSE), così il movimento è morbido e uguale a ogni velocità di schermo.
Gli strumenti fanno i conti
La rotta cresce con l'inclinazione (1,4 gradi al secondo per grado), la velocità verticale è il beccheggio per 170 piedi al minuto, l'altitudine si integra da lì, la velocità cala di 3,2 nodi per grado di cabrata e sale col gas. La pallina del coordinatore scivola al contrario di quanto in fretta cambia la virata, e torna al centro quando la virata è costante.
Il mondo dietro il vetro
Il gruppo del paesaggio è ritagliato dalla forma del parabrezza e gira attorno all'orizzonte: translate per il beccheggio (6 unità per grado), rotate per l'inclinazione al contrario. L'orizzonte artificiale fa lo stesso dentro il suo cerchio, con 3 unità per grado. Le nuvole scorrono con la velocità e rientrano dall'altra parte.
L'entrata e il pilota automatico
Una timeline fa salire le scritte e la cabina, porta tutte le lancette a fondo scala e indietro con back.out, e scatta gli interruttori uno ogni 16 centesimi. Dopo AUTOPILOT secondi senza puntatore la cloche segue due seni lenti, così l'intestazione vola da sola.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SCHOOL | script.js | Skyward Flight School | Il nome della scuola, sopra il titolo. |
TITLE | script.js | Take the | Le prime parole del titolo. |
WORD | script.js | controls. | La parola arancione del titolo. |
BANK_MAX | script.js | 30 | Quanto vira l'aereo col puntatore al bordo, in gradi. |
PITCH_MAX | script.js | 10 | Quanto sale o scende il muso, in gradi. |
RESPONSE | script.js | 3 | Quanto in fretta l'aereo segue la cloche: 1 pigro, 6 nervoso. |
THROTTLE_HOLD | script.js | 3 | I secondi di tutto gas dopo un tocco. |
CLOUDS | script.js | 7 | Le nuvole nel cielo. |
AUTOPILOT | script.js | 3 | I secondi senza puntatore prima che l'aereo voli da solo. |
--panel, --cowl, --accent… | style.css | grigio azzurro, rosso, arancione | I colori in :root: lo script li legge all'avvio. |
Quando usarla
Per l'intestazione di una scuola di volo, di un aeroclub, di un'agenzia di voli panoramici, di un museo dell'aviazione, di un simulatore o di un'app per piloti. Va bene anche come sezione «come funziona» di un corso. È un gioco: orari e prezzi veri vanno anche in testo normale.
Sul telefono
Stessa cabina e stesse animazioni: l'SVG si adatta alla larghezza, la scritta va in colonna sopra e la frase sotto il titolo sparisce. Il dito che tocca e trascina sulla cabina fa da cloche; lasciato, l'aereo torna in volo livellato.
Con il movimento ridotto
L'aereo resta fermo in una virata leggera, senza nuvole che scorrono né elica che gira né vibrazioni; le scritte e la cabina entrano in dissolvenza. Gli interruttori si scattano ancora, senza rimbalzo.
Trappole
- Il paesaggio deve girare attorno al punto dell'orizzonte, non al centro del parabrezza: se no a ogni virata la pista scivola di lato.
- Le lancette sono gruppi con translate e rotate scritti a mano: con GSAP e transform-origin sugli SVG annidati girano attorno al punto sbagliato.
- Tempo vero del fotogramma, ma limitato a 50 millesimi: quando la scheda torna visibile un passo lunghissimo farebbe saltare altitudine e rotta.
- Sul telefono il dito che trascina farebbe scorrere la pagina: touch-action none solo sulla cabina, così la scritta e il pulsante restano normali.
- Le nuvole fanno parte del mondo che gira: se fossero fuori dal gruppo resterebbero dritte mentre l'orizzonte si inclina.
Librerie
GSAP 3.15.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.
