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

Bramus

Z przyjemnością ogłaszamy wprowadzenie „Unleash the Power of Scroll-Driven Animations” – 10-częściowego kursu wideo zawierającego wszystkie informacje o animacjach przewijanych przy użyciu CSS lub JavaScript.

Możesz obejrzeć tę serię w YouTube. Tutaj jest umieszczony pierwszy odcinek.

Animacje wyświetlane po przewinięciu?

Animacje oparte na przewijaniu umożliwiają korzystanie z istniejących animacji CSS lub WAAPI i animowanie ich podczas przewijania. Z tego powodu animacje oparte na przewijaniu dziedziczą wszystkie korzyści, jakie zapewniają te interfejsy API. Obejmuje to animacje z akceleracją sprzętową przewijane, które nie zacinają się po zablokowaniu wątku głównego.

Animacje sterowane przewijaniem są dostępne w Chrome od wersji 115 i stanowią idealne uzupełnienie progresywnych ulepszeń.

Obsługa przeglądarek

  • 115
  • 115
  • x

Źródło

Obejrzyj tę serię filmów lub przeczytaj dokumentację, aby dowiedzieć się więcej o animacjach przewijanych.

Odcinki

Kurs składa się z 10 odcinków i jest podzielony na 2 główne części: wyjaśnienie podstawowych koncepcji składających się na animacje przewijane, a następnie kilka praktycznych zastosowań.

  1. Odcinek 1. Wprowadzenie
  2. Odcinek 2. Podstawowe koncepcje: scroll() i ScrollTimeline.
  3. Odcinek 3: Podstawowe koncepcje: view() i ViewTimeline.
  4. Odcinek 4. Podstawowe pojęcia: informacje o zakresach osi czasu
  5. Odcinek 5: Podstawowe pojęcia: wyszukiwanie osi czasu i nazwane ramy czasowe.
  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 wykonywanie innych działań w aplikacji Scroll
  9. Odcinek 9. Zastosowanie praktyczne: wykrywanie prędkości przewijania
  10. Odcinek 10: zakończenie.

Odcinki najlepiej oglądać w kolejności, gdy bazują na wersjach demonstracyjnych i technik omówionych we wcześniejszych odcinkach. Wersje demonstracyjne i narzędzia dostępne w każdym odcinku są dostępne online, a linki do nich znajdziesz w opisie.

Więcej materiałów