Maak kennis met "Ontketen de kracht van scrollgestuurde animaties"

Bramus

Met trots kondigen we de release aan van "Unleash the Power of Scroll-Driven Animations" , een 10-delige videocursus waarin je alles leert over scroll-driven animaties met behulp van CSS of JavaScript.

Je kunt de serie bekijken op YouTube . De eerste aflevering is hier ingesloten.

Scrollgestuurde animaties?

Met scrollgestuurde animaties kunt u een bestaande CSS- of WAAPI-animatie gebruiken en deze tijdens het scrollen animeren. Daarom nemen scrollgestuurde animaties alle voordelen over die deze API's met zich meebrengen. Dit omvat hardwareversnelde scroll-gestuurde animaties die niet onderhevig zijn aan jank wanneer de hoofdthread geblokkeerd raakt.

Scrollgestuurde animaties zijn beschikbaar in Chrome vanaf Chrome 115 en zijn de perfecte kandidaat voor progressieve verbeteringen.

Browserondersteuning

  • 115
  • 115
  • X

Bron

Bekijk de videoserie of lees de documentatie voor meer informatie over scrollgestuurde animaties.

De afleveringen

De cursus bestaat uit 10 afleveringen en is opgesplitst in twee grote delen: een uitleg van de kernconcepten waaruit scrollgestuurde animaties bestaan, gevolgd door enkele praktische toepassingen.

  1. Aflevering 1: Inleiding .
  2. Aflevering 2: Kernconcepten: scroll() en ScrollTimeline .
  3. Aflevering 3: Kernconcepten: view() en ViewTimeline .
  4. Aflevering 4: Kernconcepten: tijdlijnreeksen gedemystificeerd .
  5. Aflevering 5: Kernconcepten: tijdlijn opzoeken en benoemde tijdlijnen .
  6. Aflevering 6: Praktische toepassing: scrollschaduwen toevoegen aan een scrollcontainer .
  7. Aflevering 7: Praktische toepassing: animeer elementen in verschillende richtingen .
  8. Aflevering 8: Praktische toepassing: animeer 3D-modellen en meer op Scroll .
  9. Aflevering 9: Praktische toepassing: scrollsnelheidsdetectie .
  10. Aflevering 10: Outro .

De afleveringen kunnen het beste in volgorde worden bekeken, aangezien ze voortbouwen op demo's en technieken die in eerdere afleveringen zijn behandeld. De demo's en tools die in elke aflevering worden getoond, zijn online beschikbaar en gelinkt in de beschrijving.

Meer middelen