Presentazione della funzionalità "Scatena il potere delle animazioni con pergamena"

Bramus

Siamo orgogliosi di annunciare il lancio di "Unleash the Power of Scroll-Driven Animations", un corso video in 10 parti per imparare tutto sulle animazioni basate sullo scorrimento utilizzando CSS o JavaScript.

Puoi guardare la serie su YouTube. La prima puntata è incorporata qui.

Animazioni basate sullo scorrimento

Con le animazioni basate sullo scorrimento, puoi prendere un'animazione CSS o WAAPI esistente e animarla durante lo scorrimento. Per questo motivo, le animazioni basate sullo scorrimento ereditano tutti i vantaggi offerti da queste API. Sono incluse le animazioni basate sullo scorrimento con accelerazione hardware che non sono soggette a jank quando il thread principale viene bloccato.

Le animazioni basate sullo scorrimento sono disponibili in Chrome a partire dalla versione 115 e sono il candidato ideale per il miglioramento progressivo.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

Guarda la serie di video o leggi la documentazione per scoprire di più sulle animazioni basate sullo scorrimento.

Gli episodi

Il corso è composto da 10 episodi ed è suddiviso in due parti principali: una spiegazione dei concetti di base che compongono le animazioni basate sullo scorrimento, seguita da alcune applicazioni pratiche.

  1. Episodio 1: Introduzione.
  2. Puntata 2: Concetti di base: scroll() e ScrollTimeline.
  3. Puntata 3: Concetti di base: view() e ViewTimeline.
  4. Episodio 4: Concetti di base: i periodi della sequenza temporale demistificati.
  5. Episodio 5: Concetti di base: ricerca nella sequenza temporale e sequenze temporali denominate.
  6. Episodio 6: Applicazione pratica: aggiungi ombre di scorrimento a un contenitore di scorrimento.
  7. Episodio 7: Applicazione pratica: animare elementi in direzioni diverse.
  8. Episodio 8: Applicazione pratica: anima modelli 3D e altro ancora con lo scorrimento.
  9. Episodio 9: Applicazione pratica: rilevamento della velocità di scorrimento.
  10. Episodio 10: Outro.

È consigliabile guardare gli episodi in ordine, in quanto si basano su demo e tecniche trattate negli episodi precedenti. Le demo e gli strumenti mostrati in ogni episodio sono disponibili online e collegati nella descrizione.

Altre risorse