Animacje przewijane – studia przypadków

Swetha Gopalakrishnan

Saurabh Rajpal

Animacje uruchamiane przez przewijanie to typowy wzorzec UX w internecie. Animacja wywoływana przez przewijanie jest powiązana z pozycją przewijania kontenera. 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 reakcji na to działanie. Przykładami takich efektów są obrazy tła z paralaksą lub wskaźniki czytania, które poruszają się podczas przewijania.

Deweloperzy zwykle tworzyli animacje sterowane przewijaniem, używając JavaScriptu do reagowania na zdarzenia przewijania na głównym wątku. Utrudnia to tworzenie wydajnych animacji opartych na przewijaniu, które są zsynchronizowane z przewijaniem. Wynika to z tego, że zdarzenia przewijania są przesyłane asynchronicznie, co często powoduje opóźnienia, ponieważ są one wykonywane w wątku głównym.

Jednak w ramach nowych funkcji CSS i UI, które pojawiają się w przeglądarkach, możesz teraz tworzyć deklaratywnie animacje sterowane przewijaniem. Dzięki osi czasu przewijania i osi czasu wyświetlania, czyli nowym koncepcjom, które integrują się z dotychczasowym interfejsem Web Animations API (WAAPI) i interfejsem CSS Animations API, możesz teraz uzyskać płynne animacje sterowane przewijaniem, które działają w głównym wątku, a do ich utworzenia wystarczy kilka linii kodu. Z tego opracowania dowiesz się, jak Tokopedia, redBus i Policybazaar korzystają z tej nowej funkcji.

Tokopedia

Firma Tokopedia zastąpiła poprzednie niestandardowe implementacje JavaScriptu animacjami opartymi na przewijaniu, aby zoptymalizować wydajność strony i poprawić ogólne wrażenia użytkowników podczas przeglądania ścieżki konwersji w e-commerce.

Udało nam się zmniejszyć liczbę linii kodu nawet o 80% w porównaniu z wykorzystywaniem konwencjonalnych zdarzeń przewijania w JavaScript. Zauważyliśmy też, że podczas przewijania średnie wykorzystanie procesora spadło z 50% do 2%. Andy Wihalim, starszy inżynier oprogramowania, Tokopedia

Kod

W tej implementacji funkcja scroll() służy do ustawienia anonimowej osi czasu postępu przewijania, która służy do sterowania postępem animacji CSS. Widoczność górnego paska przyklejonego zmienia się w zależności od pozycji przewijania w określonym animationRange.

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

Na stronie docelowej Atrakcje firmy redBus, która jest wyświetlana na początku ścieżki konwersji wszystkim użytkownikom, znajdują się różne animacje na potrzeby urządzeń mobilnych i komputerów. W przypadku animacji sterowanych przewijaniem udało im się zastąpić niestandardowe implementacje JavaScriptu kodem CSS, aby uzyskać ten sam efekt.

Przypadki użycia

Galeria zdjęć z efektem wyświetlania obrazu (na urządzeniach mobilnych) i Cover Flow (na komputerach).

Kod (urządzenia mobilne)

W poprzednim przykładzie Tokopedia używała anonimowego wykresu postępu przewijania. W tym kodzie redBus używa nazwy widoku postępu na osi czasu. Animacja zmienia wartości opacity i clip-path elementu <img> w ramach zdefiniowanego elementu animation-range w najbliższym scrollerze przodka, który w tym przypadku jest scrollerem galerii zdjęć.

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

Cieszymy się, że ta funkcja łączy w doskonały sposób wydajność z lepszymi wrażeniami użytkowników, co zwiększa skuteczność sygnałów dotyczących jakości stron w ramach SEO. Co więcej, minimalna krzywizna uczenia się sprawia, że jest to niezbędna funkcja dla każdej witryny e-commerce. Otrzymaliśmy też pozytywne opinie i pomoc od innych zespołów, aby wykorzystać SDA w większej liczbie ścieżek użytkownika. – Amit Kumar, starszy menedżer ds. inżynierii, redBus

Policybazaar

Porównywanie planów ubezpieczenia to kluczowe działanie, które użytkownicy powtarzają, aby ułatwić sobie podejmowanie decyzji. Za pomocą animacji wywoływanych przez przewijanie zespół Policybazaar zmniejszał rozmiar elementów o mniejszym priorytecie w odpowiedzi na przewijanie tabeli przez użytkownika. Dzięki temu użytkownicy mogą płynnie przewijać strony, a jednocześnie poprawia się czytelność.

Dzięki animacjom zależnym od przewijania mogliśmy zmaksymalizować przestrzeń widoku dla użytkownika, aby mógł porównywać plany. Dzięki temu czytanie jest bardziej skoncentrowane i nie jest utrudnione przez nagromadzone treści. – Rishabh Mehrotra, dyrektor ds. projektowania w dziale ubezpieczeń na życie w firmie PolicyBazaar

Kod

Podobnie jak w poprzednim przykładzie z Tokopedia, Policybazaar używa funkcji scroll() do ustawiania anonimowej osi czasu postępu przewijania w celu sterowania postępem animacji CSS. W tym przypadku zmniejszenie rozmiaru czcionki i wyblaknięcie nagłówka na podstawie pozycji przewijania w określonym obszarze animation-range.

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

Animacje wywoływane przez przewijanie jako typowy element ścieżki użytkownika

Wszystkie polecane firmy z zakresu e-commerce używały animacji sterowanych przewijaniem na stronach z kartami, aby przyciągnąć uwagę użytkowników do tych kart . Poniższe przykłady pokazują efekty przewijania kart w różnych częściach ścieżki użytkownika. Zwykle odbywa się to za pomocą anonimowego widoku osi czasu postępu, który służy do kontrolowania postępu niestandardowej animacji CSS, jak pokazano w tym fragmencie kodu CSS.

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

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

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

redBus (strona główna)

Policybazaar (strona z informacjami o produkcie)

Tokopedia (strona ze szczegółami produktu)

Co należy wziąć pod uwagę podczas korzystania z interfejsu Animations API opartej na przewijaniu

W przypadku przeglądarek, które nie obsługują animacji opartych na przewijaniu, można użyć kodu polyfill, na przykład kodu polyfill dla osi czasu przewijania. W takim przypadku będziesz musiał przeprowadzić dodatkowe testy, aby upewnić się, że polyfill działa prawidłowo z Twoim frameworkiem i że przeglądarki korzystające z polyfilla nie mają problemów z animowaniem lub płynnością.

W CSS możesz użyć funkcji @supports, aby sprawdzić, czy animacja-oś czasu jest obsługiwana, zanim użyjesz animacji sterowanych przewijaniem. Na przykład:

@supports (animation-timeline: scroll()) {

}

Zasoby

• Prezentacje animacji uruchamianych przez przewijanie
• Animowanie elementów podczas przewijania za pomocą animacji sterowanych przez przewijanie
• Codelab: pierwsze kroki z animacjami zależnymi od przewijania w CSS
• Rozszerzenie do Chrome: debuger animacji sterowanej przewijaniem
• Scroll-timeline Polyfill
• Czy chcesz zgłosić błąd lub nową funkcję? Chętnie poznamy Twoją opinię.

Zapoznaj się z innymi artykułami z tej serii, aby dowiedzieć się, jak firmy e-commerce korzystają z nowych funkcji CSS i interfejsu użytkownika, takich jak przejścia między widokami, okienka nakładowe, zapytania kontenerowe i selektor has().

• Dlaczego funkcje interfejsu użytkownika w witrynie internetowej są ważne dla Twojej witryny e-commerce?
• Zobacz studia przypadków dotyczące Transitions
• Przykłady wykorzystania interfejsu Popup API
• Studia przypadków dotyczących zapytań dotyczących kontenerów
• :has() – przykłady zastosowania selektora