Il pulsante elastico
Pulsanti, Hover, Testo
NuovaGratis
Tutti i componenti
La nav sulla scala graduata
La barra di navigazione in alto di chi fa strumenti di misura, nello stile minimal: sotto le voci corre una scala graduata di tacche sottili con un indice vermiglio su una molla. L'indice scivola sulla voce sotto il puntatore e torna sulla pagina in cui si è, e ogni parola prende peso e larghezza da quanto l'indice le è vicino, così mentre corre il nero passa da una parola all'altra. Le tacche vicine all'indice si alzano, si piegano con la sua velocità e, quando si posa su una pagina nuova, ci corre sopra un'onda.
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 graduated scale nav</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the top bar of a maker of surveying instruments, Alidade. Under the links runs a fine graduated scale with a
vermilion index on a spring: the index slides to the link under the pointer and back to the current page, and
every word takes weight and width by how close the index is. The ticks near the index grow, lean with its
speed and ring once when it settles on a new page -->
<header class="bar" data-bar data-autoclic>
<span class="bar__rule" aria-hidden="true" data-rule></span>
<a class="brand" href="#" aria-label="Alidade, home" data-brand>Alidade</a>
<nav class="nav" aria-label="Main" data-nav>
<ul class="list">
<li class="item"><a class="link" href="#tools" data-link aria-current="page"><span class="link__word" data-word>Tools</span></a></li>
<li class="item"><a class="link" href="#field" data-link><span class="link__word" data-word>Field</span></a></li>
<li class="item"><a class="link" href="#notes" data-link><span class="link__word" data-word>Notes</span></a></li>
<li class="item"><a class="link" href="#studio" data-link><span class="link__word" data-word>Studio</span></a></li>
</ul>
<canvas class="scale" aria-hidden="true" data-scale></canvas>
</nav>
</header>
</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.
22 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 nav sulla scala graduata» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una barra alta 60 pixel, larga 720, chiusa sotto da un filetto nero sottile. A sinistra il nome Alidade, nero e stretto; a destra quattro voci in Anybody, Tools, Field, Notes e Studio, e sotto di loro, appoggiata al filetto, una scala di tacche fitte, una ogni 6 pixel, più lunghe ogni cinque. All'arrivo il filetto si disegna da sinistra, le tacche spuntano una dopo l'altra e un indice vermiglio, un filo con una piccola punta, sale sotto Tools, la pagina in cui si è. Le voci non sono nere o grigie: ognuna prende peso, larghezza e inchiostro da quanto l'indice le è vicino. Col mouse su un'altra voce l'indice ci corre, va un poco oltre e torna, e intanto il nero scorre da una parola all'altra; le tacche vicine all'indice si alzano come sotto una lente, si piegano nella direzione in cui corre e dietro di lui resta per un attimo un'ombra chiara. Uscendo dalla barra torna sulla pagina in cui si è. Premendo una voce l'indice si abbassa a metà; lasciando si allunga di nuovo con un piccolo rimbalzo, va sulla voce scelta e quando si posa un'onda corre sulle tacche a destra e a sinistra e si spegne. Da tastiera la voce col fuoco ha una cornice sottile e l'indice la segue; le frecce passano da una voce all'altra, Invio la sceglie.
Come funziona
Caselle che non si muovono
All'avvio e a ogni cambio di misura ogni parola viene messa per un attimo alla larghezza e al peso più grandi (WIDTH_MAX, WEIGHT_MAX) e la sua casella prende quella larghezza in pixel. Così, quando durante il movimento le parole cambiano assi, nessuna spinge le altre: i centri delle voci restano fermi e l'indice ha sempre lo stesso bersaglio.
L'indice su una molla
La posizione dell'indice insegue il bersaglio con una molla smorzata (SPRING, DAMPING), calcolata a passi di al massimo 1/120 di secondo e mai più di 1/30 per fotogramma. Il bersaglio è la voce col fuoco da tastiera, se c'è, poi quella sotto il mouse, poi la pagina corrente. Anche la lunghezza dell'indice ha la sua molla: premendo va a metà, lasciando torna con un piccolo rimbalzo.
Il peso che segue l'indice
A ogni fotogramma ogni parola prende una vicinanza p = exp(-(d/s)²), dove d è la distanza fra l'indice e il suo centro e s è REACH volte la distanza fra due voci. Con p si mescolano peso (font-variation-settings 'wght'), larghezza ('wdth') e colore fra grigio e nero: non c'è una voce accesa e le altre spente, ma un'onda di nero che corre con l'indice.
La scala disegnata in un canvas
Le tacche sono linee di un pixel in un canvas alla densità dello schermo. Ognuna prende un'altezza in più (MAGNIFY) con una campana intorno all'indice, e la punta si sposta di lato in proporzione alla sua velocità (LEAN), così le tacche si piegano come erba. Dietro l'indice che corre resta una copia chiara spostata della velocità per un trentesimo di secondo.
L'onda quando si posa
Scegliendo una pagina nuova si arma l'onda: appena l'indice è fermo sul bersaglio parte un'oscillazione sin(r/7 - 16t), smorzata nel tempo e nella distanza, che si allarga a 260 pixel al secondo e si somma all'altezza delle tacche (RING). Quando niente si muove e non c'è onda, il ciclo dei fotogrammi si ferma.
Il dito
Sul telefono un tocco sceglie la voce; trascinando lungo la barra l'indice segue il dito, fermato fra la prima e l'ultima voce, e lasciando va sulla voce più vicina. La barra lascia scorrere la pagina in verticale (touch-action: pan-y), quindi sopra di lei si può ancora scendere.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPRING | script.js | 180 | Quanto è rigida la molla dell'indice: più alta, più svelto arriva. |
DAMPING | script.js | 16 | Quanto è frenato l'indice: più basso, più oscilla prima di posarsi. |
REACH | script.js | 0.55 | Quanto si allarga il peso intorno all'indice, in voci: piccolo, solo la voce sotto l'indice è nera; grande, si accendono anche le vicine. |
WEIGHT_MIN | script.js | 330 | Il peso delle voci lontane dall'indice (da 100 a 900). |
WEIGHT_MAX | script.js | 760 | Il peso della voce sotto l'indice (da 100 a 900). |
WIDTH_MIN | script.js | 78 | La larghezza del carattere delle voci lontane, sull'asse della larghezza (da 50 a 150). |
WIDTH_MAX | script.js | 112 | La larghezza del carattere della voce sotto l'indice, sull'asse della larghezza (da 50 a 150). |
TICK_GAP | script.js | 6 | La distanza fra due tacche della scala, in pixel. |
MAGNIFY | script.js | 7 | Di quanti pixel si alzano le tacche vicine all'indice. |
LEAN | script.js | 5 | Quanto si piegano le tacche con la velocità dell'indice, in pixel. |
RING | script.js | 2.6 | Quanto è forte l'onda che corre sulle tacche quando l'indice si posa su una pagina nuova (0, niente onda). |
Quando usarla
Per la testata di chi misura, disegna o costruisce con precisione: strumenti di misura, uno studio di architettura o di ingegneria, un laboratorio, un'app di progetti, una fonderia di caratteri. Sta bene con tre, quattro o cinque voci corte su una barra chiara e vuota. Colori, pesi e la densità della scala si cambiano nelle variabili.
Sul telefono
A 390 pixel la barra è larga quasi quanto lo schermo e le quattro voci ci stanno tutte, più piccole, accanto al nome. Un tocco sceglie la voce e l'indice ci corre con la stessa molla e la stessa onda; trascinando il dito lungo la barra l'indice lo segue e le parole si accendono una dopo l'altra, e lasciando si posa sulla voce più vicina. In verticale la pagina scorre come sempre.
Con il movimento ridotto
Niente molle, niente tacche che si piegano e niente onda: l'indice è già sulla voce, le parole hanno già il loro peso e cambiando voce tutto si rifà al suo posto in un attimo. All'apertura la barra compare in dissolvenza.
Trappole
- Se la parola che prende peso si allargasse nella sua riga, spingerebbe le altre e il centro della voce si sposterebbe mentre l'indice ci va: un inseguimento senza fine. Per questo ogni voce sta in una casella larga quanto la sua parola più piena, misurata una volta sola.
- Il fuoco da tastiera e il clic arrivano tutti e due quando si clicca col mouse: il fuoco portava l'indice sulla voce prima del clic e poi restava lì. Ora l'indice segue il fuoco solo quando è visibile (:focus-visible), cioè da tastiera.
- Col dito, alzandolo dopo un trascinamento arrivava anche il clic sulla voce sotto il dito: si conta solo la scelta del trascinamento.
Librerie
GSAP 3.15.0, Anybody (font variabile, con gli assi della larghezza e del peso) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,8 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.
