Maak kennis met "Ontketen de kracht van scrollgestuurde animaties"

Bramus

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

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

Scroll-gestuurde animaties?

Met scroll-gestuurde animaties kun je een bestaande CSS- of WAAPI-animatie gebruiken en deze tijdens het scrollen animeren. Daardoor profiteren scroll-gestuurde animaties van alle voordelen die deze API's bieden. Dit omvat hardwareversnelde scroll-gestuurde animaties die niet onderhevig zijn aan jank wanneer de hoofdthread geblokkeerd raakt.

Scroll-aangedreven animaties zijn beschikbaar in Chrome vanaf Chrome 115 en zijn de perfecte kandidaat voor progressieve verbetering.

Browser Support

  • Chroom: 115.
  • Rand: 115.
  • Firefox: achter een vlag.
  • Safari: 26.

Source

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

De afleveringen

De cursus bestaat uit 10 afleveringen en is opgesplitst in twee grote delen: een uitleg van de kernconcepten die ten grondslag liggen aan scroll-animaties, gevolgd door een aantal praktische toepassingen.

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

De afleveringen kun je het beste in volgorde bekijken, omdat ze voortbouwen op de 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 staan ​​vermeld in de beschrijving.

Meer bronnen