Animacja elementów podczas przewijania za pomocą animacji przewijanych

Dowiedz się, jak korzystać z osi czasu przewijania i wyświetlania osi czasu, aby tworzyć animacje przewijane w sposób deklaratywny.

Bramus

Animacje przewijane

Obsługa przeglądarek

  • 115
  • 115
  • x

Źródło

Animacje wyświetlane po przewinięciu to typowy wzorzec UX w internecie. Animacja wyświetlana podczas przewijania jest powiązana z pozycją przewijania kontenera przewijania. Oznacza to, że gdy przewijasz w górę lub w dół, połączona animacja przewija się do przodu lub do tyłu w reakcji bezpośredniej. Przykładami są efekty takie jak obrazy tła paralaksy lub wskaźniki czytania, które przesuwają się podczas przewijania.

Wskaźnik czytania wyświetlany nad dokumentem uruchamiany przez przewijanie.

Podobnym typem animacji przewijanej jest animacja, która jest połączona z pozycją elementu w kontenerze przewijania. Na przykład dzięki nim elementy mogą pojawiać się jako odblaskowe.

Obrazy na tej stronie zanikają, gdy się pojawiają.

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

  • Nowoczesne przeglądarki wykonują przewijanie w ramach osobnego procesu, dlatego zdarzenia przewijania są wyświetlane asynchronicznie.
  • Animacje w wątku głównym mogą zacinać się.

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

Od wersji Chrome 115 dostępny jest nowy zestaw interfejsów API i koncepcji, które umożliwiają włączanie deklaratywnej animacji przewijanej: przewijanie osi czasu i wyświetlanie osi czasu.

Te nowe koncepcje integrują się z istniejącymi interfejsami Web Animations API (WAAPI) i CSS Animations API, dzięki czemu mogą dziedziczyć zalety tych interfejsów. Obejmuje to możliwość uruchamiania animacji przewijanych poza wątek główny. Tak, to dobrze – teraz możesz korzystać z płynnych animacji przewijanych i wychodzących poza wątek główny. Wystarczy do tego kilka wierszy dodatkowego kodu. Co Ci się nie podoba?!

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 ją z elementem za pomocą właściwości animation-name oraz ustaw animation-duration, aby określić czas trwania animacji. Dostępnych jest więcej usług z listy „animation-*” – animation-easing-function i animation-fill-mode. Możesz je połączyć w skrócie animation.

Oto przykład animacji, która skaluje element na osi X w górę, a jednocześnie zmienia kolor jego 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 z użyciem JavaScriptu

W języku JavaScript takie same rezultaty można wykorzystać, korzystając z interfejsu Web Animations API. 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',
   }
);

Ten wizualny wynik powyższego fragmentu kodu JavaScript jest taki sam jak w poprzedniej wersji CSS.

Osie czasu animacji

Domyślnie animacja dołączona do elementu jest uruchamiana na osi czasu dokumentu. Jej czas początkowy jest liczony od 0 w momencie załadowania strony i zaczyna przesuwać 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 masz dostęp.

Specyfikacja animacji opartych na przewinięciu definiuje dwa nowe typy osi czasu, których można używać:

  • Oś czasu postępu przewijania: oś czasu powiązana z pozycją przewijania kontenera przewijania wzdłuż konkretnej osi.
  • Oś czasu postępu wyświetlania: oś czasu powiązana z względem pozycji określonego elementu w kontenerze przewijania.

Oś czasu postępu przewijania

Oś czasu postępu przewijania to oś czasu animacji powiązana z postępem w pozycji przewijania w kontenerze przewijania – nazywanym też przewijaniem lub przewijaniem wzdłuż konkretnej osi. Przekształca pozycję w zakresie przewijania na odsetek postępu.

Początkowa pozycja przewijania oznacza postęp na 0%, a końcowa – postęp 100%. Na ilustracji poniżej widać, że postęp liczy się od 0% do 100%, gdy przewijasz suwak z góry do dołu.

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

✨ Wypróbuj tę funkcję

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

Wyświetl oś czasu postępu

Ten typ osi czasu jest powiązany z względnym postępem konkretnego elementu w kontenerze przewijania. Podobnie jak oś czasu postępu przewijania, śledzone jest przesunięcie przewijania w wyniku przewijania. W przeciwieństwie do osi czasu postępu przewijania to wskaźnik postępu zależy od względnej pozycji obiektu w obszarze przewijania.

Jest to dość porównywalne z działaniem narzędzia IntersectionObserver, które pozwala śledzić, jaka część elementu jest widoczna w obszarze przewijania. Jeśli element nie jest widoczny w obszarze przewijania, to znaczy, że nie przecina. Jeśli jest widoczny wewnątrz przewijaka – nawet w przypadku najmniejszej części – przecina.

Oś czasu postępu wyświetlania rozpoczyna się w chwili, gdy obiekt zaczyna przecinać się z kółkiem przewijania, a kończy się, gdy obiekt przestaje przecinać obszar przewijania. Na poniższej wizualizacji widać, że postęp zaczyna liczyć się od 0%, gdy obiekt wejdzie do kontenera przewijania i osiągnie 100% w momencie jego opuszczenia.

Wizualizacja osi czasu postępu wyświetlania. Postęp liczy się od 0% do 100%, gdy temat (zielone pole) przecina pasek przewijania.

✨ Wypróbuj tę funkcję

Oś czasu postępu wyświetlania jest często skracana do „Wyświetl oś czasu”. Możesz kierować reklamy na określone części osi czasu widoku na podstawie rozmiaru fotografowanego obiektu, ale później będzie to bardziej przydatne.

Nauka dzięki 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() akceptuje argumenty <scroller> i <axis>.

Akceptowane wartości argumentu <scroller> to:

  • nearest: używa najbliższego nadrzędnego kontenera przewijania (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 pomiaru postępu wzdłuż osi bloku kontenera przewijania (domyślnie).
  • inline: używa pomiaru postępu wzdłuż osi kontenera przewijania.
  • y: używa pomiaru postępu na osi Y kontenera przewijania.
  • x: używa pomiaru postępu wzdłuż osi X kontenera przewijania.

Aby np. powiązać animację z głównym narzędziem do przewijania na osi bloków, wartości przekazywane do funkcji scroll() to root i block. Łącznie daje to wartość scroll(root block).

Prezentacja: Wskaźnik postępu czytania

W tej wersji demonstracyjnej u góry widocznego obszaru znajduje się wskaźnik postępu czytania. Gdy przewijasz stronę w dół, pasek postępu rozwija się, aż po dotarciu do końca dokumentu zajmie całą szerokość widocznego obszaru. Do sterowania animacją używana jest anonimowa oś czasu postępu przewijania.

Prezentacja: wskaźnik postępu czytania.

✨ Wypróbuj tę funkcję

Wskaźnik postępu czytania jest umieszczony u góry strony z zastosowaniem stałej pozycji. Aby można było wykorzystać skomponowane animacje, width nie jest animowany, ale element jest skalowany w dół na osi X za pomocą 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ą funkcji scroll(). Do funkcji scroll() nie są przekazywane żadne argumenty, dlatego używana jest wartość domyślna.

Domyślna oś do śledzenia to nearest, a domyślna oś to block. Skutecznie kieruje ona reklamy na główny element przewijania, który znajduje się najbliżej elementu #progress, jednocześnie śledząc kierunek jego bloku.

Tworzenie nazwanej osi czasu postępu przewijania w CSS

Innym sposobem zdefiniowania osi czasu postępu przewijania jest użycie nazwanej. Są one nieco bardziej szczegółowe, ale mogą się przydać, gdy nie kierujesz reklam na przewijany nadrzędny lub główny przewijak albo gdy strona korzysta z wielu osi czasu lub gdy automatyczne wyszukiwanie nie działa. Dzięki temu możesz rozpoznać oś czasu postępu przewijania na podstawie nadanej przez Ciebie nazwy.

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

Aby dostosować, którą oś chcesz śledzić, zadeklaruj także właściwość scroll-timeline-axis. Dozwolone wartości są takie same jak argument <axis> dla funkcji scroll().

Na koniec, aby połączyć animację z osią czasu postępu przewijania, ustaw właściwość animation-timeline elementu, który ma być animowany, na taką samą wartość jak identyfikator użyty w elemencie 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;
}

Jeśli chcesz, możesz połączyć usługi scroll-timeline-name i scroll-timeline-axis w skrócie scroll-timeline. Na przykład:

scroll-timeline: --my-scroller inline;

Ta wersja demonstracyjna zawiera wskaźnik kroków widoczny nad każdą karuzelą obrazów. Gdy karuzela zawiera 3 obrazy, pasek wskaźnika rozpoczyna się od 33% szerokości, co wskazuje, że aktualnie oglądasz obraz 1 z 3. Gdy ostatni obraz jest widoczny (co jest określane przez przewinięcie paska przewijania do końca), wskaźnik zajmuje całą szerokość elementu przewijania. Nazwana oś czasu postępu przewijania jest używana do sterowania animacją.

Prezentacja: poziomy wskaźnik kroków karuzeli.

✨ Wypróbuj tę funkcję

Podstawowy znacznik dla galerii jest następujący:

<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 bezwzględnie umieszczony w elemencie otoki .gallery. 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 układa zawarte w nim elementy .gallery__entry w poziomie. Jest to element, który można przewijać. Śledząc pozycję przewijania, element .gallery__progress jest animowany. Użyjesz w tym celu nazwy --gallery__scrollcontainer Oś czasu postępu przewijania.

@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ą JavaScriptu

Aby utworzyć oś czasu przewijania w JavaScript, utwórz nowe wystąpienie klasy ScrollTimeline. W torbie zabierz ze sobą source i axis, które chcesz śledzić.

  • source: odniesienie do elementu, którego przewijający chcesz śledzić. Użyj operatora document.documentElement, aby ustawić kierowanie na główny przewijający.
  • axis: określa, którą oś śledzić. Podobnie jak w przypadku wersji usługi porównywania cen, akceptowane wartości to block, inline, x i y.
const tl = new ScrollTimeline({
  source: document.documentElement,
});

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

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

Prezentacja: wskaźnik postępu czytania, ponowne otwarcie

Aby odtworzyć wskaźnik postępu czytania w języku JavaScript, używając tych samych znaczników, 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,
    }),
  }
);

Wynik wizualny jest taki sam w wersji CSS: utworzony element timeline śledzi główny element przewijania i skaluje #progress w górę na osi X od 0% do 100% podczas przewijania strony.

✨ Wypróbuj tę funkcję

Nauka praktyczna z wyświetlaniem osi czasu postępów

Tworzenie osi czasu postępu widoku anonimowego w CSS

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

  • Pole <axis> jest takie samo jak oś czasu przewijania i określa, którą oś śledzić. Wartością domyślną jest block.
  • Za pomocą funkcji <view-timeline-inset> możesz określić przesunięcie (dodatnie lub ujemne), aby dostosować granice, gdy element zostanie uznany za widoczny lub niewidoczny. Wartość musi być procentem lub wartością logiczną auto, przy czym auto to wartość domyślna.

Aby np. powiązać animację z elementem przecinającym na osi bryły element przewijania, użyj funkcji view(block). Podobnie jak scroll() ustaw tę wartość jako wartość właściwości animation-timeline i nie zapomnij ustawić wartości animation-duration na auto.

Zastosowanie poniższego kodu sprawia, że każdy element img będzie zanikać, gdy przekracza widoczny obszar 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. Ten proces rozpoczyna się od momentu, gdy obiekt ma wchodzić na obszar przewijania, aż do momentu, gdy obiekt całkowicie opuścił ten obszar.

Możesz też połączyć je z konkretną częścią osi czasu widoku, określając zakres, do którego ma być dołączane. Może to być na przykład tylko wtedy, gdy temat pojawia się na pasku przewijania. Na tej wizualizacji postęp zaczyna liczyć się od 0%, gdy obiekt znajdzie się w kontenerze przewijania, ale osiągnie już 100% w momencie, gdy całkowicie się przecina.

Oś czasu wyświetlania ustawiona do śledzenia zakresu wpisów dotyczących tematu. Animacja działa tylko wtedy, gdy obiekt znajduje się w obszarze przewijania.

Możliwe zakresy widoku osi czasu, na które możesz kierować reklamy:

  • cover: reprezentuje pełny zakres osi czasu postępu wyświetlania.
  • entry: reprezentuje zakres, w którym pole podmiotu zabezpieczeń wchodzi w zakres widoczności postępu widoku.
  • exit: reprezentuje zakres, w którym pole podmiotu zabezpieczeń wychodzi z zakresu widoczności postępu widoku.
  • entry-crossing: reprezentuje zakres, w którym pole podmiotu zabezpieczeń przekracza końcową krawędź obramowania.
  • exit-crossing: reprezentuje zakres, w którym pole podmiotu zabezpieczeń przekracza krawędź obramowania początkowego.
  • contain: reprezentuje zakres, w którym pole podmiotu zabezpieczeń jest w pełni zawarte w zakresie widoczności postępu wyświetlania w porcie przewijania lub w całości je pokrywa. Zależy to od tego, czy obiekt jest wyższy czy krótszy niż element przewijania.

Aby zdefiniować zakres, musisz określić jego początek i koniec zakresu. Każdy z nich składa się z nazwy zakresu (zobacz listę powyżej) oraz przesunięcia zakresu, które określa jego pozycję w obrębie tej nazwy. Przesunięcie zakresu ma zwykle wartość 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, w którym pojawia się temat, jako początek zakresu wybierz entry 0%. Aby zakończyć przed wejściem obiektu, wybierz entry 100% jako wartość końca zakresu.

W CSS ustawia się go za pomocą właściwości animation-range. Przykład:

animation-range: entry 0% entry 100%;

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

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

Użyj wbudowanego narzędzia poniżej, aby zobaczyć, co reprezentują poszczególne nazwy zakresów oraz jak wartości procentowe wpływają na pozycję 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ć efekt animacji.

Zobacz wizualizację zakresów osi czasu, dostępną na stronie https://goo.gle/view-timeline-range-tool

Obejrzyj nagranie

Jak można zauważyć podczas testowania 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% są kierowane na ten sam obszar.

Gdy kierowanie na tę samą nazwę zakresu i na koniec zakresu (od 0% do 100%) obejmuje cały zakres, możesz skrócić tę wartość do samej nazwy zakresu. Na przykład pole animation-range: entry 0% entry 100%; można przepisać na znacznie krótszą wersję animation-range: entry.

Prezentacja: wyświetlanie obrazu

Ta wersja demonstracyjna zanika na obrazach, gdy znajdują się w obszarze przewijania. Służy do tego anonimowa oś czasu widoku danych. Zakres animacji został tak dostosowany, aby każdy obraz był w pełni przezroczysty, gdy znajduje się w połowie przewijania.

Prezentacja: prezentacja obrazu

✨ Wypróbuj tę funkcję

Efekt rozwijania uzyskuje się za pomocą animowanej ścieżki klipu. Kod CSS użyty do uzyskania tego efektu:

@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 wyświetlania w CSS

Podobnie jak na osi czasu przewijania masz nazwane wersje, możesz też tworzyć oś czasu o nazwie. Zamiast właściwości scroll-timeline-* używasz wariantów, które zawierają prefiks view-timeline-, czyli view-timeline-name i view-timeline-axis.

Obowiązują ten sam typ wartości i obowiązują te same reguły wyszukiwania nazwanej osi czasu.

Prezentacja: wyświetlenie obrazu, powtórka

Po wprowadzeniu zmian w prezentacji obrazu poprawiony 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%;
}

Przy użyciu funkcji view-timeline-name: revealing-image element będzie śledzony w najbliższym zakresie przewijania. Ta sama wartość jest następnie używana jako wartość właściwości animation-timeline. Wyniki wizualne są dokładnie takie same jak wcześniej.

✨ Wypróbuj tę funkcję

Tworzenie osi czasu postępu wyświetlania w języku JavaScript

Aby utworzyć oś czasu widoku w JavaScript, utwórz nowe wystąpienie klasy ViewTimeline. W torbie zabierz ze sobą subject, które chcesz śledzić, axis i inset.

  • subject: odwołanie do elementu, który chcesz śledzić we własnym narzędziu do przewijania.
  • axis: oś do śledzenia. Podobnie jak w przypadku wersji usługi porównywania cen, akceptowane wartości to block, inline, x i y.
  • inset: dostosowanie obszaru przewijania (dodatnie) lub (ujemne) przy określaniu, czy pole jest widoczne.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Aby dołączyć ją do animacji internetowej, przekaż ją jako właściwość timeline i pomiń wszystkie elementy duration, jeśli występują. 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 tę funkcję

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

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

Spójrzmy na demonstrację listy kontaktów, w której wpisy są animowane. Gdy pozycja na liście pojawia się w obszarze przewijania od dołu, przesuwa się i rozjaśnia, a po wyjściu z portu przewijania u góry przesuwa się i zanika.

Prezentacja: lista kontaktów

✨ Wypróbuj tę funkcję

W tej wersji demonstracyjnej każdy element jest ozdobiony jedną osią czasu wyświetlania, która śledzi element, gdy przecina on obszar przewijania, ale są do niego dołączone 2 animacje oparte na przewijaniu. Animacja animate-in jest dołączana do zakresu entry 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 uruchamiać dwie różne animacje z dwoma różnymi zakresami, możesz też utworzyć jeden zestaw klatek kluczowych, który już 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ć wartości animation-range. Wynik jest taki sam jak wcześniej.

✨ Wypróbuj tę funkcję

Dołączam do osi czasu przewijania elementu nadrzędnego

Mechanizm wyszukiwania dla nazwanych osi czasu przewijania i nazwanych osi czasu widoku jest ograniczony tylko do przewijania elementów nadrzędnych. Często jednak element, który musi być animowany, nie jest elementem podrzędnym mechanizmu przewijania, który musi być śledzony.

Aby było to możliwe, do wykorzystania potrzebna jest właściwość timeline-scope. Pozwala ona zadeklarować oś czasu o tej nazwie, ale nie będzie jej w rzeczywistości tworzyć. Dzięki temu oś czasu o tej nazwie ma szerszy zakres. W praktyce używasz właściwości timeline-scope we wspólnym elemencie nadrzędnym, by można było dołączyć do niego oś czasu przewijającego elementu 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żde jego podrzędne może znaleźć ją i używać jako wartości właściwości animation-timeline.
  • Element .scroller faktycznie definiuje oś czasu przewijania o nazwie --tl. Domyślnie jest widoczna tylko dla jej elementów podrzędnych, ale ponieważ .parent ma ją ustawioną jako scroll-timeline-root, przyłącza się do niej.
  • Element .subject korzysta z osi czasu --tl. Przechodzi w górę swojego drzewa nadrzędnego i znajduje --tl na drzewie .parent. Gdy parametr --tl na urządzeniu .parent wskazuje --tl z .scroller, .subject śledzi oś czasu przewijania ekranu urządzenia .scroller.

Inaczej mówiąc, za pomocą funkcji timeline-root możesz przenieść oś czasu do elementu nadrzędnego (nazywanego podnoszeniem), aby mieć do niego dostęp wszystkie jego elementy podrzędne.

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

Więcej prezentacji i materiałów

Wszystkie prezentacje omówione w tym artykule na mini-witrynie Scroll-driven-animations.style. Na stronie znajduje się wiele pokazów, które pokazują, jak można korzystać z animacji przewijanych.

Jedną z dodatkowych wersji demonstracyjnych jest lista okładek albumów. Każda okładka obraca się w 3D, gdy pojawia się w środkowym reflektorze.

Prezentacja: przebieg pokrywy

✨ Wypróbuj tę funkcję

Albo ta demonstracja układania kart, które wykorzystują position: sticky. Podczas układania się kart zablokowane już karty przesuwają się w dół, tworząc przyjemny efekt głębi. Na koniec cały stos wysuwa się z widoku jako grupa.

Prezentacja: układanie kart.

✨ Wypróbuj tę funkcję

Również dostępne w witrynie scroll-driven-animations.style to załączony wcześniej w tym poście zbiór narzędzi, takich jak wizualizacja postępu zakresu na osi czasu.

Animacje wyświetlane podczas przewijania omówiliśmy także w omówieniu nowości w animacjach internetowych na konferencji Google I/O 2023.