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

Bramus

Z przyjemnością ogłaszamy udostępnienie „Unleash the Power of Scroll-Driven Animations”, 10-częściowego kursu wideo, z którego dowiesz się wszystkiego o animacjach opartych na przewijaniu z użyciem CSS lub JavaScriptu.

Możesz obejrzeć serial w YouTube. Pierwszy odcinek jest umieszczony tutaj.

Animacje oparte na przewijaniu?

Animacje oparte na przewijaniu umożliwiają animowanie istniejących animacji CSS lub WAAPI podczas przewijania. Dzięki temu animacje oparte na przewijaniu dziedziczą wszystkie zalety tych interfejsów API. Obejmuje to animacje oparte na przewijaniu z akceleracją sprzętową, które nie są podatne na zacinanie się, gdy wątek główny jest zablokowany.

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

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

Odcinki

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

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 i połączone w opisie.

Więcej zasobów

• Dokumentacja: Animowanie elementów podczas przewijania za pomocą animacji opartych na przewijaniu
• Wersje demonstracyjne i narzędzia: scroll-driven-animations.style
• Pobierz rozszerzenie Debugger Narzędzi deweloperskich