Vai al contenuto
animorio
EN
Torna alla libreria

La finestra che sbatte le palpebre

Una scena disegnata e, davanti, una finestra che ne mostra un dettaglio da vicino. Ogni tanto la finestra sbatte le palpebre: si chiude a mandorla fino a una riga, la scena cambia, e si riapre su un altro dettaglio.

Immagini, Transizioni, SVGGSAP, Solo CSSMediaGratis

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 finestra che sbatte le palpebre</title>
  <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>
  <main class="scena" data-scena>
    <!-- lo sfondo: una scena disegnata per strato, una sola visibile alla volta -->
    <svg class="sfondo" data-sfondo viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"></svg>

    <p class="nota" data-nota>Ogni tanto la finestra sbatte le palpebre e si riapre su un’altra scena. Premila per farlo subito.</p>

    <!-- la finestra: la stessa scena vista da vicino, dentro un’apertura a mandorla -->
    <button class="finestra" type="button" data-finestra data-autoclic aria-label="Cambia scena">
      <span class="finestra__occhio" data-occhio>
        <svg class="finestra__vista" data-vista viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"><use data-uso href="#" /></svg>
      </span>
      <span class="finestra__fessura" aria-hidden="true"></span>
      <span class="finestra__angoli" aria-hidden="true"></span>
      <span class="finestra__didascalia">
        <span data-dettaglio></span>
        <span class="finestra__luogo" data-luogo></span>
      </span>
    </button>
  </main>

  <!-- le scene, disegnate una volta sola: le usano sia lo sfondo sia la finestra -->
  <svg class="nascosto" aria-hidden="true" focusable="false"><defs data-scene></defs></svg>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Cosa fa

A tutto schermo c’è una scena disegnata: il mare al tramonto, un bosco, una città di notte, un campo. Davanti, una finestra in 16:9 con quattro squadre da mirino mostra un suo dettaglio ingrandito: la barca, la baita col fumo, il gatto sul davanzale, l’aquilone. Dopo un paio di secondi la finestra sbatte le palpebre: l’apertura si stringe dall’alto e dal basso come un occhio, diventa una mandorla e poi una riga di luce; mentre è chiusa, la scena dietro sfuma nella successiva, e la finestra si riapre sul nuovo dettaglio. Intanto il dettaglio scivola piano e la scena dietro si avvicina. Premendo la finestra il battito arriva subito.

Come funziona

Una scena, due volte

Ogni scena è un gruppo SVG disegnato una volta sola dentro un defs. Lo sfondo lo usa con un use a tutto schermo (preserveAspectRatio xMidYMid slice), la finestra con un altro use dentro un SVG col viewBox stretto sul dettaglio: essendo vettoriale, ingrandito quattro volte resta nitido. I gradienti stanno dentro il gruppo e li seguono tutti e due.

La palpebra

L’apertura è un clip-path: ellipse(80% calc(var(--palpebra) × 82%) at 50% 50%). Con la variabile a 1 l’ellisse copre anche gli angoli; scendendo a 0 si stringe solo in altezza, e il rettangolo diventa prima una mandorla e poi una riga. GSAP anima la variabile CSS, e la stessa variabile accende la riga di luce e schiaccia appena il contenuto.

Il battito

Una linea del tempo che si ripete: 2,4 secondi aperta, 0,9 per chiudere con power3.inOut, un richiamo che cambia scena, 0,25 al buio, 1,1 per riaprire. La scena dietro sfuma in 0,7 secondi proprio mentre la finestra è chiusa, così il cambio non si vede mai a occhi aperti.

Vivo anche da fermo

Mentre la finestra è aperta, il viewBox scorre del 6% della sua larghezza, come una ripresa che si sposta, e la scena dietro passa da scala 1 a 1,05. Premendo la finestra la linea del tempo salta all’etichetta del battito, ma solo se la palpebra è aperta: se sta già battendo, finisce il suo.

Valori da cambiare

NomeFileDi partenzaCosa cambia
SCENEscript.js4 scenePer ogni scena: il luogo, il nome del dettaglio, il riquadro del dettaglio in 16:9 e la funzione che la disegna (SVG in 1600 × 1000).
APERTA, CHIUDE, BUIO, APREscript.js2.4, 0.9, 0.25, 1.1I secondi del battito: a occhi aperti, per chiudere, al buio, per riaprire.
ellipse(80% … 82%)style.css80%, 82%La forma della palpebra: più stretta in larghezza, più tonda la mandorla.

Quando usarla

Per raccontare un luogo o un prodotto per dettagli: la vista d’insieme dietro, la cosa da guardare davanti, e un gesto che fa pensare a uno sguardo.

Sul telefono

La finestra prende quasi tutta la larghezza; lo sfondo, tagliato al centro, mostra comunque i quattro dettagli, che stanno tutti nella parte centrale della scena.

Con il movimento ridotto

Niente battito, niente scorrimento e niente avvicinamento: la finestra resta aperta e, premendola, scena e dettaglio passano ai successivi con una dissolvenza di un quarto di secondo.

Trappole

  • Se la trasparenza per la dissolvenza sta sul gruppo della scena, la eredita anche la finestra che lo usa: va messa su un gruppo attorno allo use dello sfondo.
  • Un’ellisse che deve coprire tutto il rettangolo da aperta ha bisogno di raggi più grandi della metà: con 80% e 82% gli angoli sono dentro.
  • Il cambio va fatto con un richiamo dentro la linea del tempo, non con un timer a parte: così resta allineato al buio anche quando si salta avanti premendo la finestra.
  • Tenere i dettagli al centro della scena: con slice, al telefono i lati si perdono.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Peso: 19 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