Vai al contenuto
animorio
EN
Torna alla libreria

La lettera che cade

Scorrendo, una parola enorme si ripete a scalini e perde l’ultima lettera: la I si inclina, cade sotto la parola e, toccando terra, diventa il bottone per scrivere.

Scroll, Testo, TransizioniGSAP, Solo CSSMediaGratis

Scorri dentro l’anteprima

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.

Scarica lo zip
<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>La lettera che cade</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <section class="scena" data-scena>
      <h1 class="nascosto">Scrivi</h1>
      <p class="cenno" data-cenno>Scorri piano: la parola si ripete a scalini e perde l’ultima lettera.</p>
      <!-- sei copie della stessa parola, una sopra l'altra: l'ultima è davanti, e la sua I è un link -->
      <div class="eco" data-eco>
        <div class="eco__misura" aria-hidden="true" data-misura><span class="l">S</span><span class="l">C</span><span class="l">R</span><span class="l">I</span><span class="l">V</span><span class="l">I</span></div>
      <div class="copia" data-copia>
        <span class="copia__lastra"></span>
        <span class="copia__parola" aria-hidden="true"><span class="l">S</span><span class="l">C</span><span class="l">R</span><span class="l">I</span><span class="l">V</span><span class="l">I</span></span>
      </div>
      <div class="copia" data-copia>
        <span class="copia__lastra"></span>
        <span class="copia__parola" aria-hidden="true"><span class="l">S</span><span class="l">C</span><span class="l">R</span><span class="l">I</span><span class="l">V</span><span class="l">I</span></span>
      </div>
      <div class="copia" data-copia>
        <span class="copia__lastra"></span>
        <span class="copia__parola" aria-hidden="true"><span class="l">S</span><span class="l">C</span><span class="l">R</span><span class="l">I</span><span class="l">V</span><span class="l">I</span></span>
      </div>
      <div class="copia" data-copia>
        <span class="copia__lastra"></span>
        <span class="copia__parola" aria-hidden="true"><span class="l">S</span><span class="l">C</span><span class="l">R</span><span class="l">I</span><span class="l">V</span><span class="l">I</span></span>
      </div>
      <div class="copia" data-copia>
        <span class="copia__lastra"></span>
        <span class="copia__parola" aria-hidden="true"><span class="l">S</span><span class="l">C</span><span class="l">R</span><span class="l">I</span><span class="l">V</span><span class="l">I</span></span>
      </div>
      <div class="copia copia--davanti" data-copia>
        <span class="copia__lastra"></span>
        <span class="copia__parola" aria-hidden="true"><span class="l">S</span><span class="l">C</span><span class="l">R</span><span class="l">I</span><span class="l">V</span><span class="l" data-i>I</span><span class="copia__base" data-base></span></span>
        <a class="goccia" href="#scrivici" data-goccia aria-label="Scrivici" tabindex="-1"><span class="goccia__premi" data-premi><span class="goccia__corpo" data-corpo><span class="goccia__testo" data-etichetta></span></span></span></a>
      </div>
      </div>
    </section>
    <section class="coda" id="scrivici">
      <h2 class="coda__titolo">Scrivici</h2>
      <p class="coda__testo">Una riga basta. Qui va il modulo, o l’indirizzo a cui scrivere.</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="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrambleTextPlugin.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Cosa fa

La scena si ferma e la parola SCRIVI, larga quanto lo schermo, comincia a ripetersi: sei copie una sopra l’altra, ognuna più piccola e più bassa della precedente e appoggiata su una lastra del colore della pagina, così delle copie dietro restano solo le cime, come gradini. Poi l’ultima I si stacca: si inclina sempre più in fretta, scivola sotto la parola e si corica. Toccando terra si schiaccia e rimbalza, diventa blu e ci si scrive sopra SCRIVICI. Da lì è un bottone vero: al passaggio del mouse il nome si rimescola, e il clic porta in fondo alla pagina. Tornando su, la I si rialza e torna una lettera.

Come funziona

Sei copie e le lastre

Le copie sono sei div uno sull’altro con la stessa parola, e ognuno ha dietro una lastra del colore della pagina, un poco più grande della parola. La linea del tempo porta la copia i a scala 1 − i/13 e la fa scendere del 2i% (al telefono 1 − i/12 e 10i%), con l’origine in basso: le copie dietro restano più grandi, e di loro spunta solo la cima.

La I misurata

Nella copia davanti la I è nascosta e al suo posto c’è un link: una barra d’inchiostro messa esattamente sull’inchiostro della lettera. Il riquadro viene da measureText su un canvas (actualBoundingBoxLeft, Right e Ascent) e la linea di base da uno span alto zero allineato alla base.

La caduta

Nella stessa linea del tempo, dopo una pausa, la barra ruota di 90° con power2.in, scende con power3.in e scivola a sinistra con sine.in: accelera come una cosa che si inclina, e arriva a terra alla massima velocità. Intanto si allarga fino a uno spessore di almeno 46 pixel veri, perché a terra dovrà premerla un dito.

Toccare terra

Quando la linea del tempo passa il punto d’arrivo parte un’animazione a tempo, non legata allo scorrimento: la barra si schiaccia (0,72 per 1,12) e torna com’era con elastic.out, diventa blu e ScrambleText ci scrive il nome. Tornando indietro succede il contrario, e il link esce dal giro del Tab.

Valori da cambiare

NomeFileDi partenzaCosa cambia
ETICHETTAscript.jsSCRIVICIIl nome del bottone. La parola sta nell’HTML, lettera per lettera: cambiandola, l’ultima deve restare una lettera a bastone, come la I.
CORSAscript.js1.8Quanti schermi di scorrimento dura la scena.
DITOscript.js46Lo spessore minimo del bottone a terra, in pixel veri.
--blustyle.css#2B45FFIl colore che prende la I quando diventa un bottone.

Quando usarla

Per chiudere una pagina: la parola del contatto che diventa il bottone del contatto. Funziona con ogni parola che finisce con una lettera a bastone.

Sul telefono

Le copie scendono di più, il 10% a copia, per riempire uno schermo alto, e la barra a terra si allarga fino a uno spessore comodo per il pollice.

Con il movimento ridotto

Niente scena ferma e niente caduta: la parola è già a scalini e la I è già a terra, blu, col suo nome.

Trappole

  • getBoundingClientRect di una lettera dà la scatola della riga, non l’inchiostro: per posare la barra sulla I serve measureText, e la linea di base va letta da un elemento alto zero.
  • Le copie hanno addosso le trasformazioni di GSAP: misura con offsetLeft e offsetTop, che non le vedono, e rifai le misure a ogni refresh di ScrollTrigger (refreshInit).
  • Il rimbalzo non va legato allo scorrimento, o chi scorre piano lo vede al rallentatore: si fa partire a tempo quando la linea del tempo passa il punto d’arrivo.
  • Finché è una lettera, il link non deve ricevere né il Tab né i clic: tabIndex −1 e pointer-events: none fino all’atterraggio.

Librerie

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

Peso: 16 KB dei nostri file.

Collaudo

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

Della stessa famiglia

Tutte le animazioni