Animacja elementów podczas przewijania za pomocą animacji przewijanych

Dowiedz się, jak korzystać z osi czasu przewijania i wyświetlać osi czasu, aby tworzyć w sposób deklaratywny animacje oparte na przewijaniu.

Bramus

Animacje wywoływane przez przewijanie

Obsługa przeglądarek

  • Chrome: 115.
  • Edge: 115.
  • Firefox: za flagą.
  • Safari: nieobsługiwane.

Źródło

Animacje wywoływane przez przewijanie są częstym wzorcem UX w internecie. Animacja wywoływana przez przewijanie jest powiązana z pozycją przewijania kontenera przewijania. Oznacza to, że gdy przewijasz w górę lub w dół, powiązana animacja przesuwa się do przodu lub do tyłu w bezpośredniej odpowiedzi. Przykładami takich efektów są obrazy tła z efektem paralaksy czy wskaźniki czytania, które poruszają się podczas przewijania.

Wskaźnik czytania na górze dokumentu, który działa po przewinięciu.

Przykładem podobnego typu animacji zależnej od przewijania jest animacja powiązana z pozycją elementu w kontenerze przewijania. Dzięki temu elementy mogą na przykład pojawiać się stopniowo.

Obrazy na tej stronie pojawiają się stopniowo.

Klasycznym sposobem na uzyskanie tego rodzaju efektów jest reagowanie na zdarzenia przewijania w wątku głównym, co prowadzi do 2 głównych problemów:

  • Nowoczesne przeglądarki wykonują przewijanie w ramach osobnego procesu, dlatego zdarzenia przewijania są przesyłane asynchronicznie.
  • Animacje wątku głównego mogą być niepłynne.

To uniemożliwia lub bardzo utrudnia tworzenie wydajnych animacji synchronizowanych z przewijaniem.

Od wersji 115 Chrome zawiera nowy zestaw interfejsów API i koncepcji, które umożliwiają deklaratywną animację sterowaną przewijaniem: osi czasu przewijania i osi czasu wyświetlania.

Te nowe koncepcje są zintegrowane z dotychczasowymi interfejsami Web Animations API (WAAPI) i CSS Animations API, dzięki czemu mogą korzystać z ich zalet. Obejmuje to możliwość uruchamiania animacji sterowanych przez przewijanie w wątku głównym. Tak, przeczytaj to poprawnie: teraz za pomocą zaledwie kilku linijek dodatkowego kodu możesz uzyskać płynne animacje generowane przez przewijanie i wychodzące poza główny wątek. Co jest nie tak?

Animacje w internecie – krótkie podsumowanie

Animacje w internecie za pomocą CSS

Aby utworzyć animację w CSS, zdefiniuj zestaw klatek kluczowych za pomocą reguły @keyframes at-rule. Połącz ją z elementem za pomocą właściwości animation-name, a jednocześnie ustaw animation-duration, która określa czas trwania animacji. Dostępnych jest więcej właściwości długoterminowych animation-*–animation-easing-function i animation-fill-mode, które można połączyć w skrócie animation.

Oto na przykład animacja, która skaluje element na osi X w górę, jednocześnie zmieniając jego kolor tła:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}
.

Animacje w internecie w języku JavaScript

W JavaScript można użyć interfejsu Web Animations API, aby uzyskać ten sam efekt. Możesz to zrobić, tworząc nowe instancje Animation i KeyFrameEffect lub używając znacznie krótszej metody Element animate().

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

Wynik działania tego fragmentu kodu JavaScript jest identyczny z wynikiem działania poprzedniej wersji kodu CSS.

Sekwencje animacji

Domyślnie animacja dołączona do elementu jest odtwarzana na osi czasu dokumentu. Jego czas rozpoczęcia zaczyna się od 0 po załadowaniu strony i uruchamia się do przodu w miarę upływu czasu. Jest to domyślna oś czasu animacji i do tej pory była to jedyna oś czasu animacji, do której miałeś/miałaś dostęp.

Specyfikacja animacji sterowanych przewijaniem definiuje 2 nowe typy osi czasu, których możesz używać:

  • Oś czasu przewijania: oś czasu powiązana z pozycją przewijania kontenera przewijania na określonej osi.
  • Oś czasu wyświetlania: oś czasu powiązana z względną pozycją danego elementu w kontenerze przewijania.

Przewijanie osi czasu postępu

Oś czasu postępu przewijania to oś czasu animacji powiązana z postępem w przesuwaniu pozycji elementu w kontenerze przewijania (zwany też scrollportem lub scrollerem) wzdłuż określonej osi. Konwertuje pozycję w zakresie przewijania na odsetek postępu.

Początkowa pozycja przewijania reprezentuje 0% postępu, a końcowa pozycja przewijania – cały postęp. Z poniższej wizualizacji widać, że po przesunięciu suwaka od góry do dołu postęp rośnie od 0% do 100%.

Wizualizacja osi czasu postępu przewijania. Gdy przewijasz suwak w dół, wartość postępu rośnie od 0% do 100%.

✨ Wypróbuj to na własnej skórze

Oś czasu postępu przewijania jest często nazywana po prostu „Osią czasu przewijania”.

Wyświetlanie osi czasu postępu

Ten typ osi czasu jest powiązany z względnym postępem danego elementu w kontenerze przewijania. Podobnie jak w przypadku osi czasu postępu przewijania, śledzone jest przesunięcie suwaka. W odróżnieniu od osi czasu postępu przewijania to względna pozycja obiektu na suwaku decyduje o postępie.

Jest to w pewnym stopniu podobne do działania IntersectionObserver, które może śledzić, jak dużo elementu jest widoczne na pasku przewijania. Jeśli element nie jest widoczny w rolce, nie przecina się z innymi elementami. Jeśli jest widoczne w rolce – nawet w najmniejszym stopniu – to oznacza, że się przecina.

Czas wyświetlania zaczyna się w momencie, gdy obiekt zaczyna się pokrywać z rolką, i kończy, gdy przestaje się z nią pokrywać. W tej wizualizacji widać, że postępy zaczynają się od 0%, gdy osoba wchodzi do obszaru przewijania, i dochodzą do 100% w momencie, gdy osoba opuszcza obszar przewijania.

Wizualizacja osi czasu postępu wyświetlania. Postęp jest liczony od 0% do 100%, gdy obiekt (zielone pole) przesuwa się po suwaku.

✨ Wypróbuj to na własnej skórze

Oś czasu wyświetlania postępu jest często nazywana po prostu „Osią czasu wyświetlania”. Można kierować reklamy na określone części osi czasu wyświetlania na podstawie rozmiaru obiektu, ale o tym później.

Praktyczne zastosowanie osi czasu postępu przewijania

Tworzenie anonimowej osi czasu postępu przewijania w CSS

Najprostszym sposobem utworzenia osi czasu przewijania w CSS jest użycie funkcji scroll(). Spowoduje to utworzenie anonimowej osi czasu przewijania, którą możesz ustawić jako wartość nowej właściwości animation-timeline.

Przykład:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

Funkcja scroll() przyjmuje argumenty <scroller> i <axis>.

Akceptowane wartości dla argumentu <scroller>:

  • nearest: używa najbliższego przodka kontenera przewijania (domyślnie).
  • root: Używa widocznego obszaru dokumentu jako elementu przewijania.
  • self: używa samego elementu jako kontenera przewijania.

Akceptowane wartości argumentu <axis>:

  • block: korzysta z pomiaru postępu wzdłuż osi bloku kontenera przewijania (domyślnie).
  • inline: używa pomiaru postępu wzdłuż wbudowanej osi kontenera przewijania.
  • y: używa pomiaru postępu wzdłuż osi y kontenera przewijania.
  • x: używa pomiaru postępu wzdłuż osi x kontenera przewijania.

Aby na przykład powiązać animację z głównym scrollerem na osi bloku, wartościami do przekazania do scroll() są root i block. Łączna wartość to scroll(root block).

Demonstracja: wskaźnik postępu czytania

W tym pokazie wskaźnik postępu czytania jest przymocowany u góry obszaru widoku. Gdy przewijasz stronę, pasek postępu rośnie, aż do momentu, gdy na końcu dokumentu zajmie całą szerokość widocznego obszaru. Do sterowania animacją służy anonimowa oś czasu postępu przewijania.

Demonstracja: wskaźnik postępu odczytu.

✨ Wypróbuj to na własnej skórze

Wskaźnik postępu czytania jest umieszczony u góry strony za pomocą pozycji stałej. Aby wykorzystać skomponowane animacje, element width nie jest animowany, ale element został przeskalowany w dół na osi X za pomocą elementu transform.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Oś czasu animacji grow-progress w elemencie #progress jest ustawiona jako anonimowa oś czasu utworzona za pomocą scroll(). Funkcja scroll() nie ma żadnych argumentów, więc zostanie przywrócona do wartości domyślnych.

Domyślnym suwakiem do śledzenia jest nearest, a domyślną osią jest block. Skutecznie kieruje się ona do głównego elementu przewijającego, ponieważ jest on najbliżej elementu #progress i śledzi kierunek jego bloku.

Tworzenie oznaczenia osi czasu postępu przewijania w CSS

Alternatywnym sposobem zdefiniowania osi czasu postępu przewijania jest użycie osi o nazwie. Jest on nieco bardziej rozbudowany, ale może się przydać, gdy nie kierujesz reklam na element nadrzędny lub element główny, gdy strona używa wielu linii czasowych lub gdy automatyczne wyszukiwanie nie działa. Dzięki temu możesz rozpoznać oś czasu postępu przewijania po nazwie.

Aby utworzyć nazwaną oś czasu postępu przewijania dla elementu, ustaw w przypadku właściwości CSS scroll-timeline-name w kontenerze przewijania dowolny identyfikator. Wartość musi zaczynać się od --.

Aby dostosować oś do śledzenia, zadeklaruj też właściwość scroll-timeline-axis. Dozwolone wartości są takie same jak argument <axis> funkcji scroll().

Aby połączyć animację z osią czasu postępu przewijania, ustaw w elementach, które mają być animowane, właściwość animation-timeline na taką samą wartość jak identyfikator użyty w elementach scroll-timeline-name.

Przykład kodu:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

W razie potrzeby możesz połączyć scroll-timeline-name i scroll-timeline-axis w skrótach scroll-timeline. Na przykład:

scroll-timeline: --my-scroller inline;
.

Ta wersja demonstracyjna zawiera wskaźnik kroków wyświetlany nad każdą karuzelą obrazów. Jeśli karuzela zawiera 3 obrazy, pasek wskaźnika zaczyna się od 33% szerokości, wskazując, że obecnie oglądasz obraz 1 z 3. Gdy ostatni obraz jest widoczny (co oznacza, że suwak jest przewinięty do końca), wskaźnik zajmuje całą szerokość suwaka. Do sterowania animacją służy nazwana linia czasu postępu przewijania.

Przykład: wskaźnik kroku w karuzeli poziomej.

✨ Wypróbuj

Podstawowe znaczniki galerii:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

Element .gallery__progress jest umieszczony absolutnie w elemencie opakowania .gallery. Jego początkowy rozmiar jest określany przez niestandardową właściwość --num-images.

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

Element .gallery__scrollcontainer rozmieszcza zawarte elementy .gallery__entry w poziomie i jest elementem, który można przewijać. Śledzenie pozycji przewijania powoduje animację .gallery__progress. Aby to zrobić, odwołuj się do nazwanej osi czasu postępu przewijania --gallery__scrollcontainer.

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

Tworzenie osi czasu postępu przewijania za pomocą JavaScript

Aby utworzyć ścieżkę przewijania w JavaScript, utwórz nową instancję klasy ScrollTimeline. Przekaż obiekt property z parami source i axis, które chcesz śledzić.

  • source: odwołanie do elementu, którego scroller chcesz śledzić. Użyj document.documentElement, aby ustawić kierowanie na główny element przewijania.
  • axis: określa, którą oś śledzić. Podobnie jak w przypadku wariantu CSS, akceptowane wartości to block, inline, x i y.
const tl = new ScrollTimeline({
  source: document.documentElement,
});

Aby dołączyć go do animacji internetowej, przekaż ją jako właściwość timeline i pomiń duration, jeśli jakaś występuje.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

Prezentacja: wskaźnik postępu czytania, powtórzone

Aby odtworzyć wskaźnik postępu odczytu w JavaScripcie, używając tych samych znaczników, użyj następującego kodu JavaScript:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Efekt wizualny jest identyczny w wersji CSS: utworzony element timeline śledzi element root scroller, a element #progress jest skalowany na osi X od 0% do 100% podczas przewijania strony.

✨ Wypróbuj to na własnej skórze

Praktyczne informacje o widoku osi czasu postępu

Tworzenie anonimowej osi postępu w CSS

Aby utworzyć oś czasu wyświetlania postępu, użyj funkcji view(). Akceptowane argumenty to <axis> i <view-timeline-inset>.

  • Wartość <axis> jest taka sama jak w przypadku osi czasu postępu przewijania i określa, którą oś ma być śledzona. (wartością domyślną jest block);
  • <view-timeline-inset> pozwala określić przesunięcie (dodatnią lub ujemną), aby dostosować granice, gdy element jest uznawany za widoczny lub nie. Wartość musi być wartością procentową lub auto, przy czym auto jest wartością domyślną.

Aby na przykład powiązać animację z elementem, który przecina się z suwakową ścieżką bloku, użyj atrybutu view(block). Podobnie jak w przypadku scroll() ustaw tę wartość jako wartość właściwości animation-timeline i nie zapomnij ustawić animation-duration na auto.

Dzięki temu kodowi każdy element img będzie się pojawiał stopniowo, gdy będzie przechodzić przez obszar widoku podczas przewijania.

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

Intermezzo: wyświetlanie zakresów osi czasu

Domyślnie animacja powiązana z osią czasu widoku jest dołączana do całego zakresu osi czasu. Rozpoczyna się w momencie, gdy obiekt ma wejść do obszaru przewijania, i kończy się, gdy obiekt całkowicie opuści ten obszar.

Możesz też powiązać go z konkretną częścią osi czasu widoku, określając zakres, do którego ma zostać dołączony. Może się to zdarzyć na przykład tylko wtedy, gdy obiekt wchodzi w obszar scrollera. W tej wizualizacji postęp zaczyna się od 0%, gdy obiekt wchodzi do kontenera przewijania, ale osiąga 100% od momentu, gdy całkowicie się z nim pokryje.

Oś czasu widoku ustawiona tak, aby śledzić zakres wpisu danego tematu. Animacja pojawia się tylko wtedy, gdy obiekt wchodzi do obszaru przewijania.

Dostępne zakresy widoku osi czasu, na które możesz kierować reklamy:

  • cover: przedstawia pełny zakres osi czasu postępu wyświetlania.
  • entry: reprezentuje zakres, w którym główne pole wchodzi w zakres widoczności postępu wyświetlania.
  • exit: reprezentuje zakres, w którym główne pole opuszcza zakres widoczności postępu wyświetlania.
  • entry-crossing: reprezentuje zakres, w którym główne pole przecina krawędź końcową.
  • exit-crossing: reprezentuje zakres, w którym główne pole przecina krawędź początkową.
  • contain: reprezentuje zakres, w którym pole główne jest w pełni zawarte w zakresie widoczności postępu wyświetlania w obszarze przewijania lub całkowicie pokrywa ten zakres. To zależy od tego, czy obiekt jest wyższy czy niższy od suwaka.

Aby zdefiniować zakres, musisz ustawić początek i koniec zakresu. Każdy z nich składa się z nazwy zakresu (patrz lista powyżej) i odstępu zakresu, który określa pozycję w danym zakresie. Odchylenie zakresu to zwykle wartość procentowa z zakresu 0%–100%, ale możesz też określić stałą długość, np. 20em.

Jeśli na przykład chcesz uruchomić animację od momentu, w którym obiekt wchodzi w kadr, jako początek zakresu wybierz entry 0%. Aby zakończyć zadanie w określonym czasie, wpisz entry 100% jako wartość dla pola „Koniec zakresu”.

W CSS ustawiasz to za pomocą właściwości animation-range. Przykład:

animation-range: entry 0% entry 100%;

W kodzie JavaScript używaj właściwości rangeStart i rangeEnd.

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

Za pomocą ukrytego poniżej narzędzia możesz sprawdzić, co oznaczają poszczególne nazwy zakresów i jak wartości procentowe wpływają na pozycje początkową i końcową. Spróbuj ustawić wartość zakresu początkowego na entry 0%, a zakres końcowy na cover 50%, a następnie przeciągnij suwak, aby zobaczyć wynik animacji.

Narzędzia do wizualizacji zakresów osi czasu, dostępne pod adresem https://goo.gle/view-timeline-range-tool

Obejrzyj nagranie

Jak można zauważyć podczas korzystania z narzędzi Wyświetl zakresy osi czasu, na niektóre zakresy można kierować 2 różne kombinacje nazwy zakresu i przesunięcia zakresu. Na przykład entry 0%, entry-crossing 0% i cover 0% kierują na ten sam obszar.

Gdy wartości parametrów range-start i range-end odnoszą się do tej samej nazwy zakresu i obejmują cały zakres – od 0% do 100%– możesz skrócić wartość do samej nazwy zakresu. Na przykład ciąg animation-range: entry 0% entry 100%; można zapisać tak krótszą wersję animation-range: entry.

Prezentacja: prezentacja obrazu

W tym pokazie obrazy pojawiają się stopniowo, gdy wchodzą w obszar przewijania. W tym celu możesz użyć osi czasu anonimowego wyświetlenia. Zakres animacji został zmieniony tak, że każdy obraz ma pełną nieprzezroczystość, gdy znajduje się w połowie przewijania.

Prezentacja: ujawnienie obrazu

✨ Wypróbuj to na własnej skórze

Efekt rozszerzania uzyskuje się dzięki zastosowaniu animowanej ścieżki klipu. Kod CSS użyty do uzyskania tego efektu wygląda tak:

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Tworzenie oś czasu postępu widoku o nazwie w CSS

Podobnie jak w przypadku wersji osi czasu przewijania, możesz też tworzyć nazwane wersje osi czasu wyświetlania. Zamiast właściwości scroll-timeline-* używasz wersji z prefiksem view-timeline-, czyli view-timeline-name i view-timeline-axis.

Obowiązują te same rodzaje wartości oraz te same reguły wyszukiwania nazwanej osi czasu.

Prezentacja: ponowne wyświetlenie obrazu

Ponowne przetworzenie wcześniejszego przykładu ujawniania obrazu. Zmieniony kod wygląda tak:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

Dzięki użyciu view-timeline-name: revealing-image element będzie śledzony w najbliższym scrollerze. Ta sama wartość jest następnie używana jako wartość właściwości animation-timeline. Wyświetlane obrazy są dokładnie takie same jak wcześniej.

✨ Wypróbuj to na własnej skórze

Tworzenie osi czasu postępu wyświetlania w JavaScript

Aby utworzyć osi czasu widoku w JavaScript, utwórz nową instancję klasy ViewTimeline. Przekaż obiekt z usługą subject, którą chcesz śledzić, axis i inset.

  • subject: odniesienie do elementu, który chcesz śledzić w obrębie własnego elementu przewijania.
  • axis: oś do śledzenia. Podobnie jak w przypadku wersji CSS, akceptowane wartości to block, inline, x i y.
  • inset: przesunięcie (dodatnie) lub przesunięcie (ujemne) pola przewijania podczas określania, czy pole jest widoczne.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Aby dołączyć je do animacji internetowej, prześlij je jako właściwość timeline, pomijając dowolne duration, jeśli takie się znajdowały. Opcjonalnie możesz też przekazać informacje o zakresie za pomocą właściwości rangeStart i rangeEnd.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ Wypróbuj to na własnej skórze

Więcej możliwości do wypróbowania

Dołączanie do wielu zakresów osi czasu widoku za pomocą jednego zestawu klatek kluczowych

Spójrzmy na przykładową listę kontaktów, w której pozycje listy są animowane. Gdy pozycja na liście wchodzi do okna przewijania od dołu, przesuwa się i zanika, a gdy wychodzi z okna od góry, przesuwa się i zanika.

Demonstracja: lista kontaktów

✨ Wypróbuj to na własnej skórze

W tym pokazie każdy element jest ozdobiony jedną osią czasu widoku, która śledzi element podczas jego przemieszczania się po obszarze przewijania, ale są do niego dołączone 2 animacje sterowane przewijaniem. Animacja animate-in jest przypięta do zakresu entry na osi czasu, a animacja animate-out do zakresu exit na osi czasu.

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

Zamiast uruchamiania 2 różnych animacji dołączonych do 2 różnych zakresów możesz utworzyć jeden zestaw klatek kluczowych, który zawiera informacje o zakresie.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

Klatki kluczowe zawierają informacje o zakresie, więc nie musisz określać animation-range. Wynik jest dokładnie taki sam jak poprzednio.

✨ Wypróbuj to na własnej skórze

Dołączanie do osi czasu Scroll Timeline, która nie jest osią nadrzędną

Mechanizm wyszukiwania nazwanych przewijanych osi czasu i nazwanych osi czasu widoku jest ograniczony tylko do przewijanych przodków. Często jednak element, który ma być animowany, nie jest elementem podrzędnym scrollera, który należy śledzić.

W tym celu pomaga właściwość timeline-scope. Używasz tej właściwości, aby zadeklarować oś czasu o tej nazwie bez jej faktycznego tworzenia. Zapewnia to szerszy zakres osi czasu o tej nazwie. W praktyce używasz właściwości timeline-scope w wspólnym elemencie nadrzędnym, aby linia czasu elementu podrzędnego mogła się do niego przypiąć.

Na przykład:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

W tym fragmencie kodu:

  • Element .parent deklaruje oś czasu o nazwie --tl. Każdy element podrzędny może go znaleźć i użyć jako wartości właściwości animation-timeline.
  • Element .scroller definiuje oś czasu przewijania o nazwie --tl. Domyślnie byłby widoczny tylko dla elementów podrzędnych, ale ponieważ .parent ma ustawioną wartość scroll-timeline-root, dołącza go do tego elementu.
  • Element .subject używa osi czasu --tl. Przechodzi przez drzewo przodków i znajduje --tl na .parent. Gdy --tl na .parent wskazuje na --tl na .scroller, .subject będzie śledzić oś czasu postępów przewijania .scroller.

Innymi słowy, za pomocą timeline-root możesz przesunąć element na osi czasu do elementu nadrzędnego (czyli przesunięcia), aby wszystkie elementy podrzędne miały do niego dostęp.

Mikrodanej timeline-scope można używać zarówno w przypadku przewijania osi czasu, jak i wyświetlania osi czasu.

Więcej wersji demonstracyjnych i materiałów

Wszystkie prezentacje omówione w tym artykule znajdziesz na ministronie z animowanymi elementami sterowanymi przez przewijanie. Na stronie internetowej znajdziesz więcej demonstracji, które pokazują, co jest możliwe dzięki animacjom sterowanym przez przewijanie.

Jednym z dodatkowych demo jest ta lista okładek albumów. Każda okładka obraca się w 3D, gdy zajmuje miejsce w środku.

Demonstracja: proces okładki

✨ Wypróbuj to na własnej skórze

Możesz też obejrzeć demonstrację układania kart, która wykorzystuje position: sticky. Gdy karty są ułożone jedna na drugiej, już przyklejone karty są zmniejszane, co tworzy przyjemny efekt głębi. Na końcu cały stos przesuwa się w dół jako grupa.

Przykład: układanie kart.

✨ Wypróbuj to na własnej skórze

Znajdziesz go też na stronie scroll-driven-animations.style, w której znajdziesz zbiór narzędzi, takich jak wizualizacja wyświetlania postępu w zakresie osi czasu, omówiona wcześniej w tym poście.

Animacje uruchamiane przez przewijanie są też omawiane w sekcji Nowości w animacji internetowej na konferencji Google I/O 2023.