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 di 10 parti che offre informazioni sulle animazioni con scorrimento mediante CSS o JavaScript.

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

Animazioni con scorrimento?

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

Le animazioni con scorrimento sono disponibili in Chrome a partire da Chrome 115 e sono ideali per il miglioramento progressivo.

Supporto dei browser

  • 115
  • 115
  • x

Origine

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

Le puntate

Il corso è composto da 10 episodi ed è suddiviso in due parti importanti: una spiegazione dei concetti fondamentali che costituiscono le animazioni a scorrimento, seguita da alcune applicazioni pratiche.

  1. Puntata 1: Introduzione.
  2. Puntata 2 - Concetti principali: scroll() e ScrollTimeline.
  3. Puntata 3 - Concetti principali: view() e ViewTimeline.
  4. Episodio 4 - Concetti principali: intervalli della sequenza temporale chiariti.
  5. Episodio 5: Concetti principali: ricerca di Spostamenti e sequenze di dati denominate.
  6. Episodio 6: Applicazione pratica: aggiungi ombre di scorrimento a un contenitore di scorrimento.
  7. Episodio 7: Applicazione pratica: animazione degli elementi in diverse direzioni.
  8. Episodio 8: Applicazione pratica: animazioni di modelli 3D e altro su Scorrimento.
  9. Episodio 9: Applicazione pratica: rilevamento della velocità di scorrimento.
  10. Puntata 10: Outro.

È meglio guardare gli episodi in ordine, poiché si basano sulle demo e sulle tecniche illustrate nei precedenti episodi. Le demo e gli strumenti mostrati in ogni episodio sono disponibili online e i link sono indicati nella descrizione.

Altre risorse