Przedstawiamy „Wykorzystywanie potencjału animacji opartych na przewinięciu”

Bramus

Z dumą ogłaszamy wydanie „Unleash the Power of Scroll-Driven Animations”, czyli 10-częściowego kursu wideo, w którym dowiesz się wszystkiego o animacji sterowanej przez przewijanie za pomocą kodu CSS lub JavaScriptu.

Możesz oglądać serial w YouTube. Pierwszy odcinek został tu wbudowany.

Animacje uruchamiane przez przewijanie?

Dzięki animacjom zależnym od przewijania możesz użyć istniejącej animacji CSS lub WAAPI i animować ją podczas przewijania. Dzięki temu animacje sterowane przewijaniem dziedziczą wszystkie zalety tych interfejsów API. Obejmuje to m.in. przyspieszone przez sprzęt animacje sterowane przez przewijanie, które nie są podatne na zacięcia, gdy główny wątek jest zablokowany.

Animacje sterowane przewijaniem są dostępne w Chrome od wersji 115 i są idealnym kandydatem do stopniowego ulepszania.

Browser Support

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

Source

Aby dowiedzieć się więcej o animacji zależnej od przewijania, obejrzyj serię filmów lub przeczytaj dokumentację.

Odcinki

Kurs składa się z 10 odcinków i jest podzielony na 2 duże części: wyjaśnienie podstawowych pojęć, które składają się na animacje sterowane przewijaniem, oraz kilka praktycznych zastosowań.

  1. Odcinek 1. Wprowadzenie
  2. Odcinek 2. Podstawowe pojęcia: scroll() i ScrollTimeline
  3. Odcinek 3. Podstawowe pojęcia: view() i ViewTimeline
  4. Odcinek 4. Podstawowe pojęcia: zakresy osi czasu – wyjaśnienie
  5. Odcinek 5. Podstawowe pojęcia: wyszukiwanie na osi czasu i nazwane linie czasu
  6. Odcinek 6. Praktyczne zastosowanie: dodawanie cieni przewijania do kontenera przewijania
  7. Odcinek 7. Praktyczne zastosowanie: animowanie elementów w różnych kierunkach
  8. Episode 8: Practical Application: Animate 3D Models and More on Scroll (w języku angielskim).
  9. Odcinek 9. Praktyczne zastosowanie: wykrywanie prędkości przewijania
  10. Odcinek 10: Outro

Odcinki najlepiej oglądać w kolejności, ponieważ są one powiązane z demonstracjami i technikami omówionymi we wcześniejszych odcinkach. Demonstracje i narzędzia prezentowane w każdym odcinku są dostępne online, a linki do nich znajdują się w opisie.

Więcej zasobów