Il menu a mazzetta di colori

Menu, Fisica, Transizioni, HoverGSAP, Solo CSSImpegnativaPeso compresso: Demo 8,3 KBGSAP 28 KBGratisScarica lo zip

Il menu di un negozio di vernici e tessuti come una mazzetta di campioni: strisce di cartoncino tenute in basso da un rivetto d’ottone. Premendo la copertina le strisce si aprono a ventaglio intorno al rivetto, ognuna sulla sua molla e un attimo dopo l’altra; ogni striscia è una voce, coi suoi colori e i loro nomi. Al passaggio la striscia si solleva dal ventaglio; il ventaglio si apre e si chiude anche con la mano e lanciato continua da solo; la striscia scelta esce e le altre si richiudono dietro.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The swatch fan menu</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/standard-italic.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the swatch fan menu: a deck of paint card strips held by a brass rivet. Pressed, the strips fan out round the
         rivet, each on its own spring; each strip is a section of the site, with its colours and their names. The fan
         can be opened and closed by hand, and a chosen strip slides out while the others close behind it -->
    <div class="swatch" data-swatch>
      <div class="fan" data-fan>
        <nav class="fan__deck" id="swatch-menu" aria-label="Main" data-deck inert>
          <ul class="fan__list">
            <li>
              <a class="strip" href="#paints" style="--c: #b8432f" data-strip>
                <span class="strip__chips" aria-hidden="true">
                  <span class="chip chip--deep"><span class="chip__name">Madder Red</span></span>
                  <span class="chip chip--mid"><span class="chip__name">Clay Pot</span></span>
                  <span class="chip chip--pale"><span class="chip__name">Blush Plaster</span></span>
                </span>
                <span class="strip__label">Paints</span>
              </a>
            </li>
            <li>
              <a class="strip" href="#wallpaper" style="--c: #4c6b43" data-strip>
                <span class="strip__chips" aria-hidden="true">
                  <span class="chip chip--deep"><span class="chip__name">Fern Hollow</span></span>
                  <span class="chip chip--mid"><span class="chip__name">Sage Leaf</span></span>
                  <span class="chip chip--pale"><span class="chip__name">Pale Lichen</span></span>
                </span>
                <span class="strip__label">Wallpaper</span>
              </a>
            </li>
            <li>
              <a class="strip" href="#fabrics" style="--c: #2d4878" data-strip>
                <span class="strip__chips" aria-hidden="true">
                  <span class="chip chip--deep"><span class="chip__name">Indigo Dye</span></span>
                  <span class="chip chip--mid"><span class="chip__name">Chambray</span></span>
                  <span class="chip chip--pale"><span class="chip__name">Mist Linen</span></span>
                </span>
                <span class="strip__label">Fabrics</span>
              </a>
            </li>
            <li>
              <a class="strip" href="#inspiration" style="--c: #c07f17" data-strip>
                <span class="strip__chips" aria-hidden="true">
                  <span class="chip chip--deep"><span class="chip__name">Saffron Thread</span></span>
                  <span class="chip chip--mid"><span class="chip__name">Honeycomb</span></span>
                  <span class="chip chip--pale"><span class="chip__name">Oat Milk</span></span>
                </span>
                <span class="strip__label">Inspiration</span>
              </a>
            </li>
            <li>
              <a class="strip" href="#visit" style="--c: #6a3456" data-strip>
                <span class="strip__chips" aria-hidden="true">
                  <span class="chip chip--deep"><span class="chip__name">Plum Velvet</span></span>
                  <span class="chip chip--mid"><span class="chip__name">Heather</span></span>
                  <span class="chip chip--pale"><span class="chip__name">Rose Quartz</span></span>
                </span>
                <span class="strip__label">Visit us</span>
              </a>
            </li>
          </ul>
        </nav>

        <!-- the cover of the deck is the menu button -->
        <button class="strip strip--cover" type="button" aria-expanded="false" aria-controls="swatch-menu" data-cover data-autoclic>
          <span class="cover__word" data-word>Menu</span>
          <span class="cover__now" data-now>Paints</span>
          <span class="cover__bars" aria-hidden="true" data-bars></span>
          <span class="cover__spine" aria-hidden="true">Colour library</span>
          <span class="sr" data-name>Open the menu</span>
        </button>
        <span class="fan__rivet" aria-hidden="true" data-rivet></span>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </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.

44 valori da cambiare

Apri il Playground

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 «Il menu a mazzetta di colori» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una mazzetta chiusa in piedi: una copertina scura con Menu, sotto in corsivo la voce in cui sei (Paints), cinque righine dei colori della mazzetta e, lungo il dorso, Colour library; in basso un rivetto d’ottone lucido. Da dietro la copertina sporge la cima della striscia scelta, col suo rosso e il nome Madder Red, e ai lati si vedono i bordi delle altre strisce, mai allineati del tutto. Premendo, le strisce si aprono a ventaglio intorno al rivetto una dopo l’altra, rimbalzando un poco, mentre il rivetto scivola a sinistra perché il ventaglio resti al centro; la copertina va in fondo a destra e dice Close. Ogni striscia ha in alto il colore pieno col suo nome in corsivo, sotto due mescole più chiare coi loro nomi (Clay Pot, Blush Plaster) e lungo il bordo sinistro il nome della voce, Paints, Wallpaper, Fabrics, Inspiration, Visit us; la voce in cui sei è scritta nel suo colore. Passando sopra una striscia, si solleva dal ventaglio con un’ombra più lunga. Prendendo il ventaglio con la mano lo si apre e lo si chiude girando intorno al rivetto; lasciato, continua con la velocità della mano e si posa aperto o chiuso. Scegliendo una voce, la sua striscia esce dal ventaglio scivolando lungo sé stessa, le altre si richiudono dietro di lei e la copertina torna davanti; la striscia si raddrizza e si posa sporgendo dalla mazzetta chiusa, e sulla copertina compare il suo nome. Da tastiera le frecce scorrono le strisce, che si sollevano col fuoco, Invio sceglie, Esc chiude.

Come funziona

Strisce che girano sul rivetto

Ogni striscia è un elemento posato sul rivetto, con transform-origin sul foro: lo script le dà a ogni fotogramma rotate() per l’angolo e translateY() per quanto esce lungo sé stessa. Il rivetto e tutte le strisce scivolano insieme a sinistra mentre il ventaglio si apre, di metà della somma delle sue due estremità (calcolate dal seno e dal coseno degli angoli), così il ventaglio aperto sta al centro come la mazzetta chiusa.

Una molla per striscia

Ogni striscia ha un angolo, una velocità e un angolo a cui tende; una molla smorzata (SPRING: forza e smorzamento) la porta lì in tre piccoli passi per fotogramma, col passo limitato a 1/30 di secondo. Aprendo, gli angoli d’arrivo partono uno dopo l’altro a STAGGER secondi dalla striscia in fondo; chiudendo, dalla copertina. Anche la salita lungo la striscia (al passaggio, per la scelta, per sporgere) ha la sua molla.

La mano e atan2

Presa la mazzetta, l’angolo della mano intorno al rivetto (atan2 della posizione rispetto al centro del rivetto) muove la copertina esattamente, e quanto è aperto il ventaglio viene da lei; le altre strisce ricevono il loro angolo a quella apertura e lo inseguono sulle molle, in ritardo. Oltre le due estremità il ventaglio resiste come una cerniera dura. Lasciato, la velocità degli ultimi cento millisecondi decide dove finisce (THROW) e passa a ogni striscia, che la porta con sé.

Il ventaglio che si legge

Nel ventaglio aperto ogni striscia sta sopra quella alla sua sinistra, e la copertina guida a destra sopra tutte: così di ogni striscia resta sempre scoperto il bordo sinistro, ed è lì che sta il nome della voce, scritto in verticale (writing-mode e una rotazione di 180 gradi) dal rivetto verso fuori. I colori sono variabili in linea sulle strisce; le mescole chiare sono color-mix verso il cartoncino.

Scegliere

La striscia scelta sale sopra le sue vicine e scivola fuori lungo sé stessa; le altre si richiudono dietro, la copertina torna davanti, poi la striscia si raddrizza sull’angolo della mazzetta chiusa e scende fino a sporgere di PEEK, col nome del colore in cima ben visibile. Prende aria-current, la copertina mostra il suo nome e un’area aria-live lo legge.

Carta, tastiera, accessibilità

Il cartoncino ha una grana fatta da un feTurbulence in un SVG in linea, moltiplicata sopra carta e colori, e un’ombra che si allunga quando la striscia è sollevata. La copertina è un button con aria-expanded; le strisce sono link in un nav, inert quando la mazzetta è chiusa. Le frecce, Home e End spostano il fuoco fra le strisce, Invio sceglie, Esc chiude e riporta il fuoco alla copertina.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SPREAD`	script.js	`100`	L’angolo a cui si apre il ventaglio, in gradi, dalla prima striscia alla copertina.
`SPRING`	script.js	`[210, 0.52]`	Le molle delle strisce: quanto forte tirano verso il loro angolo, e quanto sono smorzate (1 = nessun rimbalzo).
`STAGGER`	script.js	`0.045`	I secondi fra la partenza di una striscia e quella dopo.
`LIFT`	script.js	`16`	Quanto si solleva dal ventaglio una striscia sotto il puntatore, in unità del disegno.
`PEEK`	script.js	`46`	Quanto sporge dalla mazzetta chiusa la striscia scelta.
`THROW`	script.js	`0.2`	Quanto avanti si segue un lancio della mano, in secondi della sua velocità.

Provali nel Playground

Quando usarla

Per il menu di un sito che vive di colore: un negozio di vernici, carte da parati o tessuti, uno studio di interni, un marchio di cosmetici, un portfolio di design. Da quattro a sette voci brevi, ognuna col suo colore; con di più le strisce si coprono troppo e i nomi non si leggono.

Sul telefono

Tutto il disegno si scala sulla larghezza dello schermo (a 390 pixel una striscia è lunga circa 250) e il ventaglio aperto ci sta senza sforare. Il dito apre e chiude il ventaglio come la mano col mouse, e la mazzetta tiene touch-action: none perché il dito non faccia scorrere la pagina; un tocco su una striscia la sceglie.

Con il movimento ridotto

Le strisce non girano e non rimbalzano: il ventaglio è aperto o chiuso subito, la striscia scelta è già al suo posto sporgente, e al passaggio la striscia è sollevata senza viaggio. La mano lo apre e lo chiude ancora, ma senza molle né inerzia.

Trappole

Con la copertina a sinistra sopra tutte e i nomi in basso al centro delle strisce, nel ventaglio aperto quasi nessun nome si leggeva: ogni striscia copre la parte destra di quella prima, quindi i nomi stanno sul bordo sinistro e la copertina guida a destra.
Le strisce chiuse e l’area vuota intorno lasciavano la mazzetta fuori centro una volta aperta: il rivetto scivola a sinistra con l’apertura, di metà della somma delle due estremità del ventaglio.
Nel ventaglio aperto il bordo della striscia più a destra scende sotto il rivetto di mezza larghezza: il riquadro tiene il rivetto più in alto, o l’angolo veniva tagliato.
La striscia scelta che sporge dalla mazzetta mostrava solo metà del colore e il suo nome era tagliato dalla copertina: nel colore pieno il nome sta in alto.
Il segno della voce attuale come sottolineatura, con la scrittura verticale, diventava una lineetta di fianco al nome: ora la voce attuale è scritta nel suo colore.
Con la mazzetta chiusa le strisce, nascoste dietro la copertina, prendevano il fuoco col tasto Tab: il nav è inert finché il ventaglio non è aperto.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0, Fraunces (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 8,3 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 5 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.