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

Bramus

Z dumą ogłaszamy premierę "Unleash the Power of Scroll-Driven Animations", 10-częściowego kursu wideo, w którym dowiesz się wszystkiego o animacjach opartych na przewijaniu przy użyciu CSS lub JavaScript.

Serię możesz obejrzeć na YouTube. Pierwszy odcinek jest umieszczony poniżej.

Animacje oparte na przewijaniu

Dzięki animacjom opartym na przewijaniu możesz wziąć istniejącą animację CSS lub WAAPI i animować ją podczas przewijania. Dlatego animacje oparte na przewijaniu dziedziczą wszystkie zalety tych interfejsów API. Obejmuje to animacje oparte na przewijaniu, które są przyspieszane sprzętowo i nie są narażone na zacinanie się, gdy główny wątek jest zablokowany.

Animacje oparte na przewijaniu są dostępne w Chrome od wersji 115 i doskonale nadają się do progresywnego ulepszania.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox Technology Preview: supported.
  • Safari: 26.

Source

Aby dowiedzieć się więcej o animacjach opartych na przewijaniu, obejrzyj serię filmów lub przeczytaj dokumentację.

Odcinki

Kurs składa się z 10 odcinków i jest podzielony na 2 części: wyjaśnienie podstawowych pojęć dotyczących animacji opartych na przewijaniu 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: wyjaśnienie zakresów osi czasu.
  5. Odcinek 5. Podstawowe pojęcia: wyszukiwanie na osi czasu i nazwane osie czasu.
  6. Odcinek 6. Zastosowanie praktyczne: dodawanie cieni przewijania do kontenera przewijania.
  7. Odcinek 7. Zastosowanie praktyczne: animowanie elementów w różnych kierunkach.
  8. Odcinek 8. Zastosowanie praktyczne: animowanie modeli 3D i innych elementów podczas przewijania.
  9. Odcinek 9. Zastosowanie praktyczne: wykrywanie prędkości przewijania.
  10. Odcinek 10. Podsumowanie.

Odcinki najlepiej oglądać w kolejności, ponieważ opierają się na prezentacjach i technikach omówionych w poprzednich odcinkach. Prezentacje i narzędzia pokazane w każdym odcinku są dostępne online, a linki do nich znajdziesz w opisie.

Więcej zasobów