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

Bramus

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

Puoi guardare la serie su YouTube. Il primo episodio è incorporato 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 da Chrome 115 e sono il candidato perfetto per il potenziamento progressivo.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox Technology Preview: supported.
  • Safari: 26.

Source

Guarda la serie di video o leggi la documentazione per saperne 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 fondamentali che compongono le animazioni basate sullo scorrimento, seguita da alcune applicazioni pratiche.

  1. Episodio 1: Introduzione.
  2. Episodio 2: Concetti fondamentali: scroll() e ScrollTimeline.
  3. Episodio 3: Concetti fondamentali: view() e ViewTimeline.
  4. Episodio 4: Concetti fondamentali: intervalli della sequenza temporale demistificati.
  5. Episodio 5: Concetti fondamentali: 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: anima gli elementi in direzioni diverse.
  8. Episodio 8: Applicazione pratica: anima modelli 3D e altro ancora durante lo scorrimento.
  9. Episodio 9: Applicazione pratica: rilevamento della velocità di scorrimento.
  10. Episodio 10: Conclusione.

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

Altre risorse