Jetzt neu: „Entfessle die leistungsstarken Funktionen von scrollgesteuerten Animationen“

Bramus

Wir freuen uns, den 10-teiligen Videokurs „Unleash the Power of Scroll-Driven Animations“ (Das Beste aus scrollbaren Animationen herausholen) ankündigen zu können. Darin erfahren Sie alles über scrollbare Animationen mit CSS oder JavaScript.

Du kannst dir die Serie auf YouTube ansehen. Die erste Folge ist hier eingebettet.

Scroll-Animationen?

Mit scrollbasierten Animationen können Sie eine vorhandene CSS- oder WAAPI-Animation beim Scrollen animieren. Scrollangetriebene Animationen profitieren daher von allen Vorteilen dieser APIs. Dazu gehören hardwaregestützte scrollbasierte Animationen, die nicht ruckeln, wenn der Hauptthread blockiert wird.

Scroll-basierte Animationen sind in Chrome ab Version 115 verfügbar und eignen sich perfekt für die progressive Verbesserung.

Browser Support

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

Source

Weitere Informationen zu scrollgesteuerten Animationen finden Sie in der Videoreihe oder in der Dokumentation.

Die Folgen

Der Kurs besteht aus 10 Folgen und ist in zwei große Teile unterteilt: eine Erklärung der Kernkonzepte, aus denen scrollbare Animationen bestehen, gefolgt von einigen praktischen Anwendungen.

  1. Folge 1: Einführung.
  2. Folge 2: Grundlegende Konzepte: scroll() und ScrollTimeline
  3. Folge 3: Grundlegende Konzepte: view() und ViewTimeline
  4. Folge 4: Grundlegende Konzepte: Zeitachsenbereiche entschlüsselt
  5. Folge 5: Grundlegende Konzepte: Zeitachsenabfrage und benannte Zeitachsen
  6. Folge 6: Praktische Anwendung: Scroll-Schatten zu einem Scroll-Container hinzufügen
  7. Folge 7: Praktische Anwendung: Elemente in verschiedene Richtungen animieren
  8. Folge 8: Praktische Anwendung: 3D-Modelle und mehr beim Scrollen animieren
  9. Folge 9: Praktische Anwendung: Scrollgeschwindigkeit erkennen
  10. Folge 10: Outro

Die Folgen sollten am besten in der richtigen Reihenfolge angesehen werden, da sie auf Demos und Techniken aufbauen, die in früheren Folgen behandelt wurden. Die in jeder Folge gezeigten Demos und Tools sind online verfügbar und in der Beschreibung verlinkt.

Weitere Ressourcen