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

Bramus

Siamo orgogliosi di annunciare il lancio di "Sfrutta al meglio le animazioni basate sullo scorrimento", un corso video in 10 parti per scoprire 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 scatti quando il thread principale viene bloccato.

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

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

Le puntate

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

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

È preferibile guardare le puntate in ordine, poiché si basano sulle demo e sulle tecniche trattate nelle puntate precedenti. Le dimostrazioni e gli strumenti mostrati in ogni puntata sono disponibili online e sono collegati nella descrizione.

Altre risorse