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

Bramus

Wir freuen uns, die Veröffentlichung des 10-teiligen Videokurses Unleash the Power of Scroll-Driven Animations ankündigen zu können. In diesem Kurs erfahren Sie alles über scrollbare Animationen mit CSS oder JavaScript.

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

Animationen mit Scroll-Funktion?

Bei scrollgesteuerten Animationen können Sie eine vorhandene CSS- oder WAAPI-Animation beim Scrollen animieren. Scroll-gesteuerte Animationen übernehmen daher alle Vorteile dieser APIs. Dies gilt auch für hardwarebeschleunigte Scroll-Animationen, die keiner Verzögerung unterliegen, wenn der Hauptthread blockiert wird.

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

Unterstützte Browser

  • 115
  • 115
  • x

Quelle

Sehen Sie sich die Videoreihe an oder lesen Sie die Dokumentation, um mehr über scrollbare Animationen zu erfahren.

Die Folgen

Der Kurs besteht aus zehn Folgen und ist in zwei große Teile unterteilt: eine Erläuterung der Kernkonzepte von scrollbaren Animationen, 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 entmystifiziert.
  5. Folge 5: Kernkonzepte: Zeitachsensuche und benannte Zeitachsen.
  6. Episode 6: Praktische Anwendung: Scroll Shadows zu einem Scroll-Container hinzufügen
  7. Episode 7: Practical Application: Animate Elements in Different Direction.
  8. Episode 8: Practical Application: Animate 3D Models and More on Scroll.
  9. Episode 9: Practical Application: Scroll Velocity Detection.
  10. Folge 10: Outro.

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

Weitere Ressourcen