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

Bramus

Wir freuen uns, die Veröffentlichung von „Unleash the Power of Scroll-Driven Animations“ bekannt zu geben. Dieser Videokurs mit 10 Teilen zeigt Ihnen alles, was Sie über scrollgesteuerte Animationen mit CSS oder JavaScript wissen müssen.

Sie können sich die Serie auf YouTube ansehen. Die erste Folge ist hier eingebettet.

Scrollgesteuerte Animationen

Mit scrollgesteuerten Animationen können Sie eine vorhandene CSS- oder WAAPI-Animation beim Scrollen animieren. Daher erben scrollgesteuerte Animationen alle Vorteile dieser APIs. Dazu gehören hardwarebeschleunigte scrollgesteuerte Animationen, die nicht ruckeln, wenn der Hauptthread blockiert wird.

Scrollgesteuerte 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 Technology Preview: supported.
  • Safari: 26.

Source

In der Videoserie oder in der Dokumentation erfahren Sie mehr über scrollgesteuerte Animationen.

Die Folgen

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

  1. Folge 1: Einführung.
  2. Folge 2: Kernkonzepte: scroll() und ScrollTimeline.
  3. Folge 3: Kernkonzepte: view() und ViewTimeline
  4. Folge 4: Kernkonzepte: Zeitachsenbereiche entmystifizieren.
  5. Folge 5: Kernkonzepte: Zeitachsen-Lookup und benannte Zeitachsen.
  6. Folge 6: Praktische Anwendung: Scrollschatten zu einem Scrollcontainer 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: Abspann.

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

Weitere Ressourcen