Il titolo che si apre

Testo, ScrollSolo CSS, GSAPMediaPeso compresso: Demo 4,4 KBGSAP + ScrollTrigger 45 KBGratisScarica lo zip

Scorri dentro l’anteprima

Un titolo in due metà riempie lo schermo; scorrendo le metà si rimpiccioliscono e si allontanano, e in mezzo si apre il paragrafo. I titoli si adattano alla larghezza con il solo CSS.

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 heading that opens</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="top">
    <p class="brand">Lanterna Philharmonic</p>
    <p class="top__line">Season notes</p>
  </header>

  <main>
    <!-- every split section is three screens tall; its stage stays on screen while the two halves open -->
    <section class="split split--night" data-split>
      <h2 class="visually-hidden">First season</h2>
      <div class="split__stage">
        <div class="split__grid">
          <div class="split__half split__half--top" aria-hidden="true">
            <p class="fit split__title" data-title>
              <span class="fit__box"><span class="fit__display">First</span></span>
              <span class="fit__ref">First</span>
            </p>
          </div>
          <p class="split__text" data-text>Thirty-two concerts, eleven premieres and a new hall by the water. This is the first season of the Lanterna Philharmonic, and it starts with every door open.</p>
          <div class="split__half split__half--bottom" aria-hidden="true">
            <p class="fit split__title" data-title>
              <span class="fit__box"><span class="fit__display">Season</span></span>
              <span class="fit__ref">Season</span>
            </p>
          </div>
        </div>
        <p class="split__hint" data-hint>Scroll</p>
      </div>
    </section>

    <section class="split split--amber" data-split>
      <h2 class="visually-hidden">One hall, every street</h2>
      <div class="split__stage">
        <div class="split__grid">
          <div class="split__half split__half--top" aria-hidden="true">
            <p class="fit split__title" data-title>
              <span class="fit__box"><span class="fit__display">One hall</span></span>
              <span class="fit__ref">One hall</span>
            </p>
          </div>
          <p class="split__text" data-text>On Sundays the orchestra leaves the stage: string quartets in the covered market, brass on the morning ferries, the whole symphony in the old shipyard.</p>
          <div class="split__half split__half--bottom" aria-hidden="true">
            <p class="fit split__title" data-title>
              <span class="fit__box"><span class="fit__display">Every street</span></span>
              <span class="fit__ref">Every street</span>
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="split split--sky" data-split>
      <h2 class="visually-hidden">The city in tune</h2>
      <div class="split__stage">
        <div class="split__grid">
          <div class="split__half split__half--top" aria-hidden="true">
            <p class="fit split__title" data-title>
              <span class="fit__box"><span class="fit__display">The city</span></span>
              <span class="fit__ref">The city</span>
            </p>
          </div>
          <p class="split__text" data-text>Rehearsals are open to anyone holding a ticket stub, and every school in the district gets a row of seats at the front.</p>
          <div class="split__half split__half--bottom" aria-hidden="true">
            <p class="fit split__title" data-title>
              <span class="fit__box"><span class="fit__display">In tune</span></span>
              <span class="fit__ref">In tune</span>
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="outro">
      <p class="outro__text">The season opens on the first Friday of October.</p>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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

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 titolo che si apre» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Le note di stagione di un’orchestra inventata, in tre capitoli, ognuno del suo colore. In ogni capitolo un titolo di due righe enormi, «First» e «Season», occupa lo schermo, una metà sopra e una sotto la riga di mezzo. Scorrendo, la pagina resta ferma: le due metà si rimpiccioliscono e si allontanano, quella sopra verso l’alto e quella sotto verso il basso, e dalla riga di mezzo si apre il paragrafo, che si scopre dal centro verso fuori. Finito il capitolo, arriva il successivo.

Come funziona

Il palco

Ogni capitolo è alto tre schermi e il suo palco, alto uno schermo, resta fermo con position: sticky. Il palco è una griglia di due righe uguali: la metà di sopra appoggia il titolo in basso, quella di sotto in alto, così le due righe si toccano sulla linea di mezzo. Il paragrafo sta al centro, sotto i titoli.

La larghezza, col solo CSS

Accanto al titolo c’è una sua copia nascosta a 16 px, che prende la sua larghezza; una scatola prende il resto della riga. Una proprietà registrata come lunghezza trasforma 100cqi in pixel dove è scritta: nella scatola vale la riga intera, nel titolo vale la scatola, cioè la riga meno il testo. Riga diviso testo dà di quanto ingrandire, e tan(atan2(a, b)) = a / b è il modo che ha il CSS di dividere una lunghezza per un’altra. Il titolo non supera mai l’altezza della sua metà (100cqh).

Quanto si allontanano

Lo script misura l’altezza vera del paragrafo, una volta caricati i caratteri, e allontana ogni metà di metà di quell’altezza più 54 px. Le metà scendono a scala 0,82, o meno se servono per restare ognuna entro un quarto dello schermo; quella sopra si stringe verso il suo bordo basso (origine al 75%), quella sotto verso l’alto (25%).

Lo scorrimento

Una timeline legata allo scorrimento del capitolo, dall’inizio del palco fino alla sua fine, con mezzo secondo di ritardo per ammorbidire la rotella: le metà si muovono dall’inizio, il paragrafo si apre da un decimo, con clip-path da inset(50% 0 50% 0) a inset(0). Se cambia la larghezza della finestra tutto si rimisura dopo 200 ms di quiete; l’altezza no, perché al telefono cambia a ogni barra che si ritira.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SHRINK, HEIGHT`	script.js	`0.82, 0.25`	La scala più grande delle metà una volta aperte, e la parte di schermo che ognuna può occupare al massimo.
`GAP`	script.js	`54`	I pixel fra il paragrafo e ogni metà, a fine apertura.
`TEXT_FROM`	script.js	`0.1`	Quando comincia ad aprirsi il paragrafo, nello scorrimento del capitolo.
`SCRUB`	script.js	`0.5`	I secondi che le metà impiegano a raggiungere lo scorrimento.
`--fit-max`	style.css	`100cqh`	Il limite dei titoli: l’altezza della loro metà. Alzalo per titoli che escono dal palco.

Provali nel Playground

Quando usarla

Per aprire un capitolo con un titolo da manifesto e poche righe sotto: la pagina di una stagione, un rapporto annuale, un racconto a capitoli, il lancio di un prodotto.

Sul telefono

Uguale: i titoli riempiono la larghezza dello schermo, il paragrafo è centrato, a 18 px, e si prende tutta la riga meno i margini di 32 px.

Con il movimento ridotto

Ogni capitolo è alto uno schermo e già aperto: titoli piccoli sopra e sotto, paragrafo in mezzo.

Trappole

La proprietà va registrata con @property come lunghezza: senza, 100cqi resta una parola e si calcola dove la si usa, cioè sempre sulla stessa scatola, e il rapporto diventa infinito.
La copia nascosta a 16 px deve stare più stretta della riga: se il testo a 16 px fosse più largo, la scatola accanto si ridurrebbe a zero e il titolo resterebbe a 16 px.
cqh nel titolo prende il contenitore più vicino che ha un’altezza, cioè la metà (container-type: size): le scatole del fit sono contenitori solo in larghezza e non contano.
Una parola corta, allargata fino a riempire la riga, diventa più alta della sua metà ed esce dal palco: il limite 100cqh la ferma.
Senza uno scorrimento morbido, scrub: true segue la rotella a scatti: qui mezzo secondo di ritardo.

Librerie

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Big Shoulders (font variabile) 5.3.0, Newsreader (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 4,4 KB; le librerie: GSAP + ScrollTrigger 45 KB.

Collaudo

Provata il 29 settembre 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.