Animacja elementów podczas przewijania za pomocą animacji przewijanych

Dowiedz się, jak używać osi czasu przewijania i osi czasu widoku do tworzenia animacji opartych na przewijaniu w sposób deklaratywny.

Bramus

Data publikacji: 5 maja 2023 r.

Animacje oparte na przewijaniu

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

Animacje wywoływane przewijaniem to popularny wzorzec UX w internecie. Animacja oparta na przewijaniu jest powiązana z pozycją przewijania kontenera przewijania. Oznacza to, że podczas przewijania w górę lub w dół połączona animacja będzie przewijana do przodu lub do tyłu w bezpośredniej reakcji na to działanie. Przykładem są efekty takie jak obrazy tła z efektem paralaksy czy wskaźniki czytania, które przesuwają się podczas przewijania.

Wskaźnik czytania u góry dokumentu, który zmienia się w zależności od przewijania.

Podobnym typem animacji opartej na przewijaniu jest animacja powiązana z pozycją elementu w kontenerze przewijania. Dzięki niemu np. elementy mogą pojawiać się stopniowo, gdy stają się widoczne.

Obrazy na tej stronie pojawiają się stopniowo, gdy stają się widoczne.

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

  • Nowoczesne przeglądarki przewijają stronę w osobnym procesie, dlatego dostarczają zdarzenia przewijania asynchronicznie.
  • Animacje w wątku głównym mogą powodować zacinanie się.

Sprawia to, że tworzenie wydajnych animacji opartych na przewijaniu, które są zsynchronizowane z przewijaniem, jest niemożliwe lub bardzo trudne.

Od Chrome 115 dostępny jest nowy zestaw interfejsów API i koncepcji, których możesz używać do włączania deklaratywnych animacji opartych na przewijaniu: osi czasu przewijania i osi czasu widoku.

Te nowe koncepcje są zintegrowane z istniejącymi interfejsem Web Animations API (WAAPI) i interfejsem CSS Animations API, dzięki czemu mogą korzystać z zalet tych interfejsów. Obejmuje to możliwość uruchamiania animacji opartych na przewijaniu poza wątkiem głównym. Tak, dobrze czytasz: teraz możesz mieć płynne animacje oparte na przewijaniu, które działają poza wątkiem głównym i wymagają tylko kilku dodatkowych wierszy kodu. Czego tu nie lubić?!

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. Połącz go z elementem za pomocą właściwości animation-name, a także ustaw animation-duration, aby określić, jak długo ma trwać animacja. Dostępnych jest więcej animation-* właściwości długichanimation-easing-function i animation-fill-mode, żeby wymienić tylko kilka z nich. Wszystkie można połączyć w animation skrócie.

Oto na przykład animacja, która powiększa element wzdłuż osi X, a jednocześnie zmienia 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 za pomocą JavaScriptu

W języku JavaScript można osiągnąć dokładnie ten sam efekt za pomocą interfejsu Web Animations API. Możesz to zrobić, tworząc nowe instancje Animation i KeyFrameEffect, lub użyć 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 wizualny powyższego fragmentu kodu JavaScript jest identyczny z poprzednią wersją CSS.

Oś czasu animacji

Domyślnie animacja dołączona do elementu jest odtwarzana na osi czasu dokumentu. Czas pochodzenia zaczyna się od 0 w momencie załadowania strony i jest odliczany do przodu wraz z upływem czasu. Jest to domyślna oś czasu animacji, która do tej pory była jedyną dostępną osią czasu animacji.

Specyfikacja animacji opartych na przewijaniu definiuje 2 nowe typy osi czasu, których możesz używać:

  • Oś czasu postępu przewijania: oś czasu połączona z pozycją przewijania kontenera przewijania wzdłuż określonej osi.
  • Wyświetl oś czasu postępu: 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, która jest powiązana z postępem w pozycji przewijania kontenera przewijania – zwanego też obszarem przewijania lub przewijarką – wzdłuż określonej osi. Przekształca pozycję w zakresie przewijania na procent postępu.

Początkowa pozycja przewijania oznacza 0% postępu, a końcowa pozycja przewijania – 100% postępu. Na poniższej wizualizacji widać, że postęp zwiększa się od 0% do 100% w miarę przesuwania suwaka od góry do dołu.

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

✨ Wypróbuj

Oś czasu postępu przewijania jest często skracana do „Oś czasu przewijania”.

Wyświetlanie osi czasu postępu

Ten typ osi czasu jest powiązany ze względnym postępem określonego elementu w kontenerze przewijania. Podobnie jak w przypadku osi czasu postępu przewijania śledzone jest przesunięcie przewijania przewijarki. W przeciwieństwie do osi czasu postępu przewijania o postępie decyduje względna pozycja elementu w przewijarce.

Jest to w pewnym stopniu porównywalne z działaniem interfejsu IntersectionObserver, który może śledzić, jak bardzo element jest widoczny w przewijarce. Jeśli element nie jest widoczny w przewijanej sekcji, nie przecina się z nią. Jeśli jest widoczny w przewijanej sekcji, nawet w najmniejszej części, oznacza to, że się z nią przecina.

Oś czasu postępu wyświetlenia rozpoczyna się w momencie, gdy element zaczyna przecinać przewijanie, a kończy, gdy przestaje je przecinać. Na poniższej wizualizacji widać, że postęp zaczyna się od 0%, gdy osoba wchodzi do kontenera przewijania, i osiąga 100% w momencie, gdy go opuszcza.

Wizualizacja osi czasu postępu widoku. Postęp jest liczony od 0% do 100% w miarę przesuwania się obiektu (zielonego pola) po przewijaku.

✨ Wypróbuj

Oś czasu wyświetlania jest często skracana do „Oś 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 argumentu <scroller> to:

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

Akceptowane wartości argumentu <axis> to:

  • block: używa miary postępu wzdłuż osi bloku kontenera przewijania (domyślnie).
  • inline: używa miary postępu wzdłuż osi wiersza kontenera przewijania.
  • y: używa miary postępu wzdłuż osi Y kontenera przewijania.
  • x: używa miary postępu wzdłuż osi X kontenera przewijania.

Jeśli na przykład chcesz powiązać animację z głównym elementem przewijanym na osi bloku, wartości, które należy przekazać do funkcji scroll(), to root i block. Łącznie daje to wartość scroll(root block).

Wersja demonstracyjna: wskaźnik postępu czytania

Wersja demonstracyjna ma wskaźnik postępu czytania przymocowany do górnej części widocznego obszaru. Podczas przewijania strony w dół pasek postępu rośnie, aż po dotarciu do końca dokumentu zajmie całą szerokość widocznego obszaru. Animacja jest oparta na anonimowej osi czasu postępu przewijania.

Prezentacja: wskaźnik postępu czytania.

✨ Wypróbuj

Wskaźnik postępu czytania jest umieszczony u góry strony i ma stałe położenie. Aby wykorzystać animacje złożone, animowany jest nie element width, ale element jest zmniejszany 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 na anonimową oś czasu utworzoną za pomocą scroll(). Funkcja scroll() nie ma argumentów, więc zostaną użyte jej wartości domyślne.

Domyślny element do śledzenia to nearest, a domyślna oś to block. W ten sposób kierujesz reklamy na główny element przewijany, ponieważ jest on najbliższym elementem przewijanym elementu #progress, a jednocześnie śledzisz kierunek jego blokowania.

Tworzenie nazwanej osi czasu postępu przewijania w CSS

Innym sposobem zdefiniowania osi czasu postępu przewijania jest użycie nazwanej osi czasu. Jest nieco bardziej rozbudowana, ale może się przydać, gdy nie kierujesz reklam na przewijanie nadrzędne lub główne albo gdy strona korzysta z wielu osi czasu lub gdy automatyczne wyszukiwanie nie działa. Dzięki temu możesz zidentyfikować oś czasu postępu przewijania po nadanej przez siebie nazwie.

Aby utworzyć nazwaną oś czasu postępu przewijania w elemencie, ustaw właściwość CSS scroll-timeline-name w kontenerze przewijania na wybrany identyfikator. Wartość musi zaczynać się od znaku --.

Aby dostosować oś, wzdłuż której mają być śledzone dane, 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łaściwość animation-timeline elementu, który ma być animowany, na tę samą wartość co identyfikator użyty w przypadku scroll-timeline-name.

Przykładowy kod:

@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ócie scroll-timeline. Na przykład:

scroll-timeline: --my-scroller inline;

W tym trybie demo nad każdą karuzelą obrazów znajduje się wskaźnik kroku. Gdy karuzela zawiera 3 obrazy, pasek wskaźnika zaczyna się od 33% szerokości, co oznacza, że aktualnie wyświetlany jest pierwszy z 3 obrazów. Gdy ostatni obraz jest widoczny (określa to przewinięcie do końca), wskaźnik zajmuje całą szerokość przewijania. Animacja jest sterowana przez nazwaną oś czasu postępu przewijania.

Prezentacja: wskaźnik kroku w karuzeli poziomej.

✨ Wypróbuj

Podstawowy kod galerii wygląda tak:

<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 opakowującym .gallery. Jego początkowy rozmiar jest określany przez właściwość niestandardową --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 w nim elementy .gallery__entry w poziomie i jest elementem, który można przewijać. Dzięki śledzeniu pozycji przewijania element .gallery__progress jest animowany. Odbywa się to przez odwołanie 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ć oś czasu przewijania w JavaScript, utwórz nową instancję klasy ScrollTimeline. Przekaż pakiet właściwości z wartościami source i axis, które chcesz śledzić.

  • source: odwołanie do elementu, którego przewijanie chcesz śledzić. Użyj document.documentElement, aby kierować na główny element przewijany.
  • 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ż go jako właściwość timeline i pomijaj wszelkie duration, jeśli takie występowały.

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

Wersja demonstracyjna: wskaźnik postępu czytania – powtórka

Aby odtworzyć wskaźnik postępu czytania za pomocą JavaScriptu przy użyciu tego samego kodu, użyj tego 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,
    }),
  }
);

Wersja CSS daje identyczny efekt wizualny: utworzony element timeline śledzi główny element przewijany i skaluje element #progress na osi X od 0% do 100% podczas przewijania strony.

✨ Wypróbuj

Praktyczne zastosowanie osi czasu wyświetlania postępu

Tworzenie osi czasu postępu anonimowego wyświetlania w CSS

Aby utworzyć oś czasu postępu wyświetlania, 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ś śledzić. (wartością domyślną jest block);
  • Za pomocą parametru <view-timeline-inset> możesz określić przesunięcie (dodatnie lub ujemne), aby dostosować granice, gdy element jest uznawany za widoczny lub niewidoczny. 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 przecinającym przewijanie w osi bloku, użyj view(block). Podobnie jak w przypadku parametru scroll() ustaw tę wartość jako wartość właściwości animation-timeline i nie zapomnij ustawić parametru animation-duration na auto.

Dzięki poniższemu kodowi każdy element img będzie się pojawiać, gdy będzie się przesuwać przez obszar widoczny 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 połączona z osią czasu widoku jest dołączana do całego zakresu osi czasu. Rozpoczyna się w momencie, gdy obiekt ma wejść do obszaru przewijania, a kończy, gdy całkowicie go opuści.

Możesz też połączyć go z określonym fragmentem osi czasu widoku, podając zakres, do którego ma być dołączony. Może to być na przykład tylko wtedy, gdy osoba wchodzi na przewijany obszar. Na poniższej wizualizacji postęp zaczyna się od 0%, gdy element wchodzi do kontenera przewijania, ale osiąga 100% od momentu, gdy w całości się z nim przecina.

Oś czasu widoku ustawiona na śledzenie zakresu wejścia tematu. Animacja jest odtwarzana tylko wtedy, gdy osoba wchodzi do obszaru przewijania.

Możesz kierować reklamy na te zakresy czasu oglądania:

  • cover: reprezentuje pełny zakres osi czasu postępu wyświetlania.
  • entry: reprezentuje zakres, w którym główny boks wchodzi w zakres widoczności postępu wyświetlania.
  • exit: reprezentuje zakres, w którym główny boks opuszcza zakres widoczności postępu wyświetlania.
  • entry-crossing: przedstawia zakres, w którym główny przedział przekracza krawędź końcową.
  • exit-crossing: reprezentuje zakres, w którym główny element przecina krawędź początku.
  • contain: oznacza zakres, w którym główny boks jest w całości zawarty w zakresie widoczności postępu wyświetlania w obszarze przewijania lub w całości go obejmuje. Zależy to od tego, czy obiekt jest wyższy czy niższy od przewijanej treści.

Aby zdefiniować zakres, musisz ustawić jego początek i koniec. Każdy z nich składa się z nazwy zakresu (patrz lista powyżej) i przesunięcia zakresu, które określa pozycję w ramach tej nazwy zakresu. Przesunięcie zakresu jest zwykle wartością procentową z zakresu od 0% do 100%, ale możesz też określić stałą długość, np. 20em.

Jeśli na przykład chcesz uruchomić animację od momentu wejścia obiektu, wybierz entry 0% jako początek zakresu. Aby zakończyć je przed wejściem osoby, wybierz entry 100% jako wartość końca zakresu.

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

animation-range: entry 0% entry 100%;

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

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

Skorzystaj z narzędzia poniżej, aby sprawdzić, co oznacza każda nazwa zakresu i jak wartości procentowe wpływają na pozycje początkową i końcową. Spróbuj ustawić początek zakresu na entry 0%, a koniec na cover 50%, a następnie przeciągnij pasek przewijania, aby zobaczyć wynik animacji.

Wizualizator zakresów osi czasu dostępny na stronie https://goo.gle/view-timeline-range-tool

Obejrzyj nagranie

Jak możesz zauważyć, korzystając z narzędzia Zakresy osi czasu widoku, niektóre zakresy mogą być kierowane przez 2 różne kombinacje nazwy zakresu i przesunięcia zakresu. Na przykład entry 0%, entry-crossing 0% i cover 0% są kierowane na ten sam obszar.

Jeśli zakres początkowy i zakres końcowy są kierowane na tę samą nazwę zakresu i obejmują cały zakres – od 0% do 100%– możesz skrócić wartość do samej nazwy zakresu. Na przykład animation-range: entry 0% entry 100%; można zastąpić znacznie krótszym zapisem animation-range: entry.

Prezentacja: odsłanianie obrazu

Wersja demonstracyjna pokazuje obrazy, które pojawiają się w obszarze przewijania. Odbywa się to za pomocą osi czasu anonimowych wyświetleń. Zakres animacji został zmodyfikowany tak, aby każdy obraz miał pełną nieprzezroczystość, gdy znajduje się w połowie przewijania.

Prezentacja: Odsłanianie obrazu

✨ Wypróbuj

Efekt rozwijania uzyskuje się za pomocą animowanej ścieżki przycinania. CSS użyty w tym efekcie to:

@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 nazwanej osi czasu postępu widoku w CSS

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

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

Prezentacja: odsłanianie obrazu, powtórka

Zmodyfikowany kod z wcześniejszej wersji demonstracyjnej ujawniania obrazu 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%;
}

Używając view-timeline-name: revealing-image, element będzie śledzony w najbliższym elemencie przewijanym. Ta sama wartość jest następnie używana jako wartość właściwości animation-timeline. Dane wyjściowe są dokładnie takie same jak wcześniej.

✨ Wypróbuj

Tworzenie osi czasu postępu wyświetlania w JavaScript

Aby utworzyć oś czasu widoku w JavaScript, utwórz nową instancję klasy ViewTimeline. Przekaż pakiet właściwości z wartościami subject, które chcesz śledzić, axis i inset.

  • subject: odwołanie do elementu, który chcesz śledzić w jego własnym przewijaniu.
  • axis: oś, którą chcesz śledzić. Podobnie jak w przypadku wariantu CSS, akceptowane wartości to block, inline, x i y.
  • inset: wstawka (dodatnia) lub wysunięcie (ujemne) w przypadku obszaru przewijania podczas określania, czy pole jest widoczne.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Aby dołączyć go do animacji internetowej, przekaż go jako właściwość timeline i pomijaj wszelkie duration, jeśli takie występowały. Opcjonalnie możesz 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

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

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

Przyjrzyjmy się tej wersji demonstracyjnej listy kontaktów, w której pozycje są animowane. Gdy element listy wchodzi do obszaru przewijania od dołu, pojawia się z efektem przesunięcia i zanikania, a gdy opuszcza obszar przewijania u góry, znika z efektem przesunięcia i zanikania.

Prezentacja: lista kontaktów

✨ Wypróbuj

W tej wersji demonstracyjnej każdy element jest ozdobiony 1 osią czasu widoku, która śledzi element podczas przesuwania go przez obszar przewijania, ale są do niego dołączone 2 animacje oparte na przewijaniu. Animacja animate-in jest dołączona do zakresu entry osi czasu, a animacja animate-out – do zakresu exit 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 uruchamiać 2 różne animacje przypisane do 2 różnych zakresów, możesz też utworzyć 1 zestaw klatek kluczowych, który zawiera już 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ć parametru animation-range. Wynik jest dokładnie taki sam jak wcześniej.

✨ Wypróbuj

Dołączanie do osi czasu przewijania, która nie jest elementem nadrzędnym

Mechanizm wyszukiwania nazwanych osi czasu przewijania i osi czasu widoku jest ograniczony tylko do elementów nadrzędnych przewijania. Bardzo często jednak element, który ma być animowany, nie jest elementem podrzędnym przewijanej sekcji, którą należy śledzić.

Aby to działało, użyj właściwości timeline-scope. Za pomocą tej właściwości możesz zadeklarować oś czasu o tej nazwie bez jej tworzenia. Dzięki temu oś czasu o tej nazwie będzie miała szerszy zakres. W praktyce używasz właściwości timeline-scope w przypadku wspólnego elementu nadrzędnego, aby można było do niego dołączyć oś czasu elementu przewijanego podrzędnego.

Na przykład:

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

W tym fragmencie:

  • 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 swoich elementów podrzędnych, ale ponieważ .parent ma go ustawionego jako scroll-timeline-root, jest do niego dołączony.
  • Element .subject korzysta z osi czasu --tl. Przechodzi w górę drzewa przodków i znajduje --tl na .parent. Gdy --tl na .parent wskazuje --tl elementu .scroller, .subject będzie śledzić oś czasu postępu przewijania elementu .scroller.

Innymi słowy, możesz użyć symbolu timeline-root, aby przenieść oś czasu do elementu nadrzędnego (czyli podnieść) i umożliwić dostęp do niej wszystkim elementom podrzędnym tego elementu.

Właściwość timeline-scope może być używana zarówno z osią czasu przewijania, jak i z osią czasu wyświetlania.

Więcej wersji demonstracyjnych i materiałów

Wszystkie wersje demonstracyjne omówione w tym artykule znajdziesz na mini-stronie scroll-driven-animations.style. Witryna zawiera wiele innych wersji demonstracyjnych, które pokazują, co można osiągnąć dzięki animacjom opartym na przewijaniu.

Jedną z dodatkowych wersji demonstracyjnych jest ta lista okładek albumów. Każda okładka obraca się w 3D, gdy jest wyświetlana na środku.

Prezentacja: Cover Flow

✨ Wypróbuj

Możesz też wypróbować tę wersję demonstracyjną kart, która wykorzystuje position: sticky. Gdy karty się układają, te, które już są na miejscu, zmniejszają się, co daje ciekawy efekt głębi. Na koniec cały stos znika z widoku jako grupa.

Prezentacja: układanie kart.

✨ Wypróbuj

Na stronie scroll-driven-animations.style znajdziesz też zbiór narzędzi, takich jak wizualizacja postępu zakresu osi czasu widoku, która została uwzględniona wcześniej w tym poście.

Animacje oparte na przewijaniu zostały też omówione w artykule Co nowego w animacjach internetowych na konferencji Google I/O 23.