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 videocursus van 10 delen waarin je alles leert over scroll-gestuurde animaties met behulp van CSS of JavaScript.

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

Scrollgestuurde animaties?

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

Scroll-gestuurde animaties zijn beschikbaar in Chrome vanaf versie 115 en lenen zich uitstekend voor progressieve verbetering.

Browser Support

  • Chrome: 115.
  • Rand: 115.
  • Firefox Technology Preview: ondersteund.
  • Safari: 26.

Source

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

De afleveringen

De cursus bestaat uit 10 afleveringen en is opgedeeld in twee grote delen: een uitleg van de kernconcepten van scroll-gestuurde animaties, gevolgd door een aantal praktische toepassingen.

  1. Aflevering 1: Introductie .
  2. Aflevering 2: Kernconcepten: scroll() en ScrollTimeline .
  3. Aflevering 3: Kernconcepten: view() en ViewTimeline .
  4. Aflevering 4: Kernconcepten: Tijdlijnbereiken ontrafeld .
  5. Aflevering 5: Kernconcepten: Tijdlijn opzoeken 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: Animeer 3D-modellen en meer op Scroll .
  9. Aflevering 9: Praktische toepassing: Detectie van scrollsnelheid .
  10. Aflevering 10: Outro .

De afleveringen kunnen het beste in de juiste volgorde bekeken worden, omdat ze voortbouwen op de demonstraties en technieken die in eerdere afleveringen aan bod zijn gekomen. De demonstraties en tools die in elke aflevering worden getoond, zijn online beschikbaar en de links staan ​​in de beschrijving.

Meer bronnen