Padroneggiare CSS @scroll-timeline: Controllo dell'animazione tramite l'avanzamento dello scorrimento

Nel panorama in continua evoluzione dello sviluppo web, creare esperienze utente coinvolgenti e interattive è fondamentale. CSS offre vari strumenti per raggiungere questo obiettivo e uno dei più potenti, sebbene spesso trascurato, è la regola @scroll-timeline. Questa funzionalità consente agli sviluppatori di collegare le animazioni direttamente all'avanzamento dello scorrimento di un elemento, creando accattivanti animazioni guidate dallo scorrimento. Questo articolo fornisce un'esplorazione completa di @scroll-timeline, trattando la sua sintassi, proprietà, utilizzo pratico e tecniche di animazione avanzate per elevare i tuoi progetti web.

Cos'è CSS @scroll-timeline?

@scroll-timeline è una regola at-rule CSS che definisce una sequenza temporale di scorrimento, che è essenzialmente una sequenza di stati che corrispondono alla posizione di scorrimento di un elemento specificato. Invece di fare affidamento sulle tradizionali animazioni basate sul tempo, @scroll-timeline collega l'avanzamento dell'animazione all'azione di scorrimento dell'utente. Ciò si traduce in un'animazione più naturale e reattiva, poiché la velocità dell'animazione è direttamente controllata dal comportamento di scorrimento dell'utente.

Questo apre a possibilità entusiasmanti per:

• Narrazione visiva: rivela progressivamente i contenuti mentre l'utente scorre.
• Visualizzazione interattiva dei dati: anima grafici e diagrammi mentre l'utente esplora i dati.
• Effetti di parallasse: crea profondità e dimensione animando diversi elementi a velocità variabili in base alla posizione di scorrimento.
• Indicatori di avanzamento: rappresenta visivamente l'avanzamento dell'utente attraverso un documento lungo.

Sintassi e proprietà

La sintassi di base della regola at-rule @scroll-timeline è la seguente:

            @scroll-timeline timeline-name {
  source: auto | <element-selector>;
  orientation: auto | block | inline;
  scroll-offsets: <scroll-offset>[ , <scroll-offset> ]*;
}

            

              
                Copy
              
            
          

Analizziamo ciascuna proprietà:

timeline-name

Questo è un identificatore univoco per la tua sequenza temporale di scorrimento. Userai questo nome per fare riferimento alla sequenza temporale quando la applicherai a un'animazione.

Esempio:

            @scroll-timeline my-scroll-timeline {
  /* ... */
}

            

              
                Copy
              
            
          

source

Questa proprietà specifica l'elemento la cui posizione di scorrimento guiderà l'animazione. Può avere due valori:

• auto: il browser determina automaticamente l'elemento di scorrimento. Questo è spesso il viewport del documento (la finestra del browser).
• <element-selector>: un selettore CSS che identifica l'elemento specifico da utilizzare come origine di scorrimento. Ciò consente di indirizzare contenitori o sezioni specifici nella pagina.

Esempio (utilizzando il viewport come origine):

            @scroll-timeline my-scroll-timeline {
  source: auto; /* Utilizza il viewport */
  /* ... */
}

            

              
                Copy
              
            
          

Esempio (utilizzando un elemento specifico come origine):

            @scroll-timeline my-scroll-timeline {
  source: #scrollable-container; /* Utilizza l'elemento con ID "scrollable-container" */
  /* ... */
}

            

              
                Copy
              
            
          

orientation

Questa proprietà specifica la direzione di scorrimento da utilizzare per la sequenza temporale. Determina se l'animazione è guidata dallo scorrimento verticale o orizzontale. Può avere tre valori:

• auto: il browser determina automaticamente la direzione di scorrimento in base alla direzione di scorrimento dominante dell'elemento sorgente.
• block: utilizza la direzione di scorrimento a blocchi (verticale, nella maggior parte delle modalità di scrittura).
• inline: utilizza la direzione di scorrimento in linea (orizzontale, nella maggior parte delle modalità di scrittura).

Esempio (utilizzando lo scorrimento verticale):

            @scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block; /* Scorrimento verticale */
  /* ... */
}

            

              
                Copy
              
            
          

Esempio (utilizzando lo scorrimento orizzontale):

            @scroll-timeline my-scroll-timeline {
  source: #horizontal-scroll-container;
  orientation: inline; /* Scorrimento orizzontale */
  /* ... */
}

            

              
                Copy
              
            
          

scroll-offsets

Questa proprietà definisce le posizioni di scorrimento che corrispondono a punti specifici nell'animazione. È una proprietà facoltativa e, se non specificata, l'animazione verrà riprodotta dall'inizio alla fine dell'area scorrevole. Quando viene utilizzata, è possibile definire uno o più offset di scorrimento, ognuno dei quali specifica una posizione di scorrimento e un punto corrispondente nell'avanzamento dell'animazione.

La sintassi per un <scroll-offset> è:

            <scroll-offset> = <length-percentage> [ at <length-percentage> ]

            

              
                Copy
              
            
          

Dove:

• La prima <length-percentage> rappresenta la posizione di scorrimento all'interno dell'area scorrevole.
• L'opzionale at <length-percentage> rappresenta l'avanzamento dell'animazione corrispondente (da 0% a 100%). Se omesso, l'avanzamento dell'animazione viene distribuito uniformemente tra gli offset di scorrimento definiti.

Esempi:

            /* La posizione di scorrimento 200px corrisponde all'avanzamento dell'animazione 0% */
scroll-offsets: 200px at 0%;

/* La posizione di scorrimento al 50% dell'area scorrevole corrisponde all'avanzamento dell'animazione 50% */
scroll-offsets: 50% at 50%;

/* Offset multipli: */
scroll-offsets: 0px at 0%, 500px at 50%, 1000px at 100%;

/* Senza la parola chiave "at" - avanzamento dell'animazione distribuito uniformemente: */
scroll-offsets: 0px, 500px, 1000px; /* Equivalente a 0px at 0%, 500px at 50%, 1000px at 100% */

            

              
                Copy
              
            
          

Considerazioni importanti per scroll-offsets:

• Se specifichi scroll-offsets, assicurati che coprano l'intervallo dell'area scorrevole per evitare comportamenti imprevisti dell'animazione.
• L'avanzamento dell'animazione viene interpolato tra gli offset di scorrimento definiti.
• Se non specifichi scroll-offsets, l'avanzamento dell'animazione verrà distribuito uniformemente su tutta l'area scorrevole.

Applicazione della sequenza temporale di scorrimento a un'animazione

Dopo aver definito la sequenza temporale di scorrimento, è necessario applicarla a un'animazione CSS utilizzando la proprietà animation-timeline.

La sintassi è semplice:

            animation-timeline: timeline-name; /* Utilizza il nome definito in @scroll-timeline */

            

              
                Copy
              
            
          

Dovrai anche definire un'animazione CSS standard utilizzando @keyframes. L'animazione definisce le modifiche nelle proprietà CSS che si verificheranno quando l'utente scorre. Inoltre, è necessario assicurarsi che la proprietà CSS `animation-range` sia impostata. Definisce l'intervallo della sequenza temporale di scorrimento che attiverà l'animazione.

Ecco un esempio completo:

            /* Definisci la sequenza temporale di scorrimento */
@scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block;
}

/* Definisci l'animazione */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Applica l'animazione e la sequenza temporale di scorrimento a un elemento */
.animated-element {
  animation: fade-in 1s forwards;
  animation-timeline: my-scroll-timeline;
  animation-range: entry 25% cover 75%; /* entry e cover sono valori di parola chiave per gli intervalli di inizio e fine */
}

            

              
                Copy
              
            
          

In questo esempio:

• La @scroll-timeline denominata my-scroll-timeline è definita, utilizzando il viewport come origine e lo scorrimento verticale come orientamento.
• La @keyframes denominata fade-in definisce una semplice animazione di dissolvenza in entrata e scorrimento verso l'alto.
• La classe .animated-element ha l'animazione fade-in applicata, ma invece di essere attivata da un timer, è controllata da my-scroll-timeline.
• L'animation-range definisce che l'animazione dovrebbe iniziare quando il bordo superiore dell'elemento entra nel 25% inferiore del viewport e terminare quando lascia il 25% superiore.

Esempi pratici e casi d'uso

Esploriamo alcuni esempi pratici di come è possibile utilizzare @scroll-timeline per creare esperienze web coinvolgenti.

1. Rivelazione progressiva dei contenuti

Questo è un caso d'uso comune in cui si rivela il contenuto mentre l'utente scorre la pagina verso il basso. Immagina un articolo di forma lunga con sezioni che appaiono gradualmente quando entrano nella visualizzazione.

HTML:

            <section class="content-section">
  <h2>Sezione 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

<section class="content-section">
  <h2>Sezione 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>

            

              
                Copy
              
            
          

CSS:

            @scroll-timeline reveal-timeline {
  source: auto;
  orientation: block;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-section {
  animation: reveal 1s forwards;
  animation-timeline: reveal-timeline;
  animation-range: entry 25% cover 75%;
}

            

              
                Copy
              
            
          

In questo esempio, ogni .content-section apparirà gradualmente quando scorre nel viewport. L'`animation-range` assicura che l'animazione inizi quando il bordo superiore della sezione entra nel 25% inferiore del viewport e termini quando la sezione lascia il 25% superiore.

2. Effetti di parallasse

Gli effetti di parallasse creano un senso di profondità spostando gli elementi di sfondo a velocità diverse rispetto agli elementi in primo piano. @scroll-timeline semplifica l'implementazione dello scorrimento parallasse.

HTML:

            <div class="parallax-container">
  <div class="background-element"></div>
  <div class="foreground-element">
    <h2>Sezione Parallasse</h2>
    <p>Alcuni contenuti qui...</p>
  </div>
</div>

            

              
                Copy
              
            
          

CSS:

            .parallax-container {
  position: relative;
  height: 500px; /* Regola come necessario */
  overflow: hidden;
}

.background-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* Sostituisci con la tua immagine */
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* Crea l'effetto parallasse */
  transform-origin: top;
  pointer-events: none; /* Consente di fare clic sugli elementi in primo piano */

  animation: parallax-bg 1s linear forwards;
  animation-timeline: parallax-timeline;
  animation-range: 0vh 100vh;
}

.foreground-element {
  position: relative;
  z-index: 1;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}

@scroll-timeline parallax-timeline {
  source: auto;
  orientation: block;
}

@keyframes parallax-bg {
    0% { transform: translateZ(-1px) scale(2) translateY(0px); }
    100% { transform: translateZ(-1px) scale(2) translateY(-50vh); }
}

            

              
                Copy
              
            
          

In questo esempio, .background-element è posizionato dietro .foreground-element e ridimensionato utilizzando transform. Viene quindi applicata l'animazione `parallax-bg`, facendo sì che lo sfondo si muova più lentamente del primo piano mentre l'utente scorre, creando l'effetto parallasse. L'`animation-range` assicura che l'animazione venga eseguita per l'intera altezza del viewport (da 0vh a 100vh).

3. Animazione di una barra di avanzamento

È possibile utilizzare @scroll-timeline per creare una barra di avanzamento che rappresenta visivamente l'avanzamento dello scorrimento dell'utente attraverso un documento.

HTML:

            <div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <!-- Il tuo contenuto qui -->
</div>

            

              
                Copy
              
            
          

CSS:

            .progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  animation: progress-bar-fill 1s linear forwards;
  animation-timeline: document-scroll-timeline;
}

@scroll-timeline document-scroll-timeline {
  source: auto;
  orientation: block;
}

@keyframes progress-bar-fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

            

              
                Copy
              
            
          

In questo esempio, la larghezza di .progress-bar viene animata da 0% a 100% mentre l'utente scorre il documento. @scroll-timeline è denominata `document-scroll-timeline`, chiarendo cosa rappresenta.

Tecniche avanzate

Dopo aver compreso le basi, è possibile esplorare alcune tecniche avanzate per creare animazioni ancora più sofisticate guidate dallo scorrimento.

1. Utilizzo di scroll-offsets per un controllo preciso

La proprietà scroll-offsets consente di mappare posizioni di scorrimento specifiche a valori di avanzamento dell'animazione specifici. Ciò è utile quando si desidera attivare determinati stati di animazione in punti precisi durante lo scorrimento.

            @scroll-timeline custom-timeline {
  source: #scrollable-container;
  orientation: block;
  scroll-offsets: 100px at 0%, 500px at 50%, 1000px at 100%;
}

@keyframes custom-animation {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

.animated-element {
  animation: custom-animation 1s forwards;
  animation-timeline: custom-timeline;
}

            

              
                Copy
              
            
          

In questo esempio, l'animazione:

• Inizia a translateX(-100px) e opacity: 0 quando la posizione di scorrimento è 100px.
• Raggiunge translateX(0) e opacity: 1 quando la posizione di scorrimento è 500px.
• Termina a translateX(100px) e opacity: 0 quando la posizione di scorrimento è 1000px.

2. Combinazione con JavaScript

Sebbene @scroll-timeline offra un potente controllo dell'animazione tramite CSS, è possibile combinarlo con JavaScript per una flessibilità ancora maggiore. Ad esempio, è possibile utilizzare JavaScript per:

• Calcolare e aggiornare dinamicamente scroll-offsets in base alle dimensioni del viewport o alle modifiche del contenuto.
• Attivare effetti o interazioni aggiuntivi basati su JavaScript in base all'avanzamento dello scorrimento.
• Implementare soluzioni di fallback per i browser che non supportano completamente @scroll-timeline.

Ecco un esempio di base di utilizzo di JavaScript per leggere l'avanzamento dello scorrimento e aggiornare una variabile CSS:

            const scrollableElement = document.getElementById('scrollable-container');
const animatedElement = document.querySelector('.animated-element');

scrollableElement.addEventListener('scroll', () => {
  const scrollPosition = scrollableElement.scrollTop;
  const maxScroll = scrollableElement.scrollHeight - scrollableElement.clientHeight;
  const scrollPercentage = (scrollPosition / maxScroll) * 100;

  animatedElement.style.setProperty('--scroll-progress', scrollPercentage + '%');
});

            

              
                Copy
              
            
          

È quindi possibile utilizzare questa variabile CSS all'interno dell'animazione:

            @keyframes custom-animation {
  0% {
    transform: translateX(calc(var(--scroll-progress) * -1px));
  }
  100% {
    transform: translateX(calc(var(--scroll-progress) * 1px));
  }
}

.animated-element {
  --scroll-progress: 0%; /* Valore iniziale */
  animation: custom-animation 1s linear forwards;
  animation-timeline: scroll-driven-timeline;
}

            

              
                Copy
              
            
          

3. Sfruttare diverse funzioni di easing

Sebbene animation-timing-function non sia direttamente applicabile alla sequenza temporale di scorrimento stessa (poiché la sequenza temporale è guidata dall'avanzamento dello scorrimento, non dal tempo), è comunque possibile utilizzare le funzioni di easing all'interno di @keyframes per controllare la velocità e il ritmo dell'animazione in diverse fasi. Sperimenta con diverse funzioni di easing come ease-in, ease-out, ease-in-out o anche curve di bezier cubiche personalizzate per ottenere l'effetto desiderato.

Compatibilità del browser e fallback

A partire dalla fine del 2023, @scroll-timeline gode di un supporto del browser relativamente buono nei browser moderni come Chrome, Edge, Firefox e Safari. Tuttavia, è essenziale verificare lo stato di compatibilità corrente su siti Web come Can I use... prima di implementarlo in produzione.

Per i browser che non supportano @scroll-timeline, è possibile fornire un fallback utilizzando i tradizionali listener di eventi di scorrimento basati su JavaScript e librerie di animazione come GSAP (GreenSock Animation Platform) o Anime.js. È anche possibile utilizzare le query delle funzionalità CSS (@supports) per applicare condizionatamente le animazioni basate su @scroll-timeline o i fallback basati su JavaScript.

            @supports (animation-timeline: scroll()) {
  /* Applica animazioni basate su @scroll-timeline */
  .animated-element {
    animation: fade-in 1s forwards;
    animation-timeline: my-scroll-timeline;
  }
} @else {
  /* Applica fallback basato su JavaScript */
  .animated-element {
    /* Nascondi inizialmente */
    opacity: 0;
  }

  /* (Codice JavaScript per rilevare lo scorrimento e applicare l'opacità) */
}

            

              
                Copy
              
            
          

Considerazioni sull'accessibilità

Quando si utilizza @scroll-timeline o qualsiasi tecnica di animazione, è fondamentale considerare l'accessibilità. Assicurarsi che le animazioni non causino:

• Crisi epilettiche: evitare animazioni lampeggianti o in rapida evoluzione.
• Distrazione: fornire un modo agli utenti per mettere in pausa o disabilitare le animazioni, soprattutto se sono lunghe o distraggono.
• Sovraccarico cognitivo: utilizzare le animazioni con parsimonia e assicurarsi che abbiano uno scopo chiaro, piuttosto che essere puramente decorative.
• Chinetosi: prestare attenzione agli effetti di parallasse, poiché possono scatenare la chinetosi in alcuni utenti.

Valutare la possibilità di fornire modi alternativi per accedere alle informazioni presentate tramite animazioni, come contenuti statici o testo descrittivo. Utilizzare gli attributi ARIA per fornire significato semantico e contesto alle tecnologie assistive.

Migliori pratiche

Ecco alcune best practice da tenere a mente quando si lavora con @scroll-timeline:

• Utilizzare nomi di sequenze temporali descrittivi: scegliere nomi di sequenze temporali che indichino chiaramente il loro scopo (ad es. parallax-background-timeline, reveal-section-timeline).
• Mantenere le animazioni performanti: ottimizzare le animazioni per evitare colli di bottiglia delle prestazioni. Utilizzare le proprietà CSS accelerate dall'hardware come transform e opacity quando possibile.
• Testare a fondo: testare le animazioni su diversi dispositivi e browser per assicurarsi che funzionino come previsto e non causino problemi di accessibilità o prestazioni.
• Inizia in modo semplice: inizia con animazioni semplici e aggiungi gradualmente complessità man mano che acquisisci esperienza.
• Considera l'esperienza utente: assicurati che le animazioni migliorino l'esperienza utente, non la sminuiscano. Evita animazioni eccessivamente complesse o distraenti.
• Utilizza la proprietà CSS `animation-range`: assicurati che le animazioni si attivino solo quando un elemento si trova nel viewport per un'esperienza fluida e prevedibile.

Conclusione

@scroll-timeline è una potente funzionalità CSS che consente agli sviluppatori di creare animazioni coinvolgenti e interattive guidate dallo scorrimento. Collegando le animazioni al comportamento di scorrimento dell'utente, è possibile creare esperienze web più naturali e reattive. Comprendendo la sua sintassi, le proprietà e le tecniche avanzate, è possibile sfruttare @scroll-timeline per elevare i tuoi progetti web e creare percorsi utente accattivanti. Ricorda di considerare la compatibilità del browser, l'accessibilità e le prestazioni quando implementi @scroll-timeline e dai sempre la priorità all'esperienza utente.