Animacje wyświetlane po przewinięciu to częsty wzorzec UX w internecie. Animacja z przewijaniem 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. Mogą to być na przykład obrazy tła paralaksy lub wskaźniki czytania, które przesuwają się podczas przewijania.
Deweloperzy zwykle tworzą animacje przewijające się za pomocą JavaScriptu do reagowania na zdarzenia przewijania w wątku głównym. Utrudnia to tworzenie wydajnych animacji opartych na przewijaniu, które są zsynchronizowane z przewijaniem, ponieważ zdarzenia przewijania są dostarczane asynchronicznie, co często prowadzi do zacinania się z powodu występowania w wątku głównym.
Jednak w ramach nowych funkcji CSS i interfejsu dostępnych w przeglądarkach możesz teraz tworzyć deklaratywne animacje przewijane. Dzięki funkcji przewijania osi czasu i osi czasu, czyli nowym koncepcjom integrowanym z istniejącymi interfejsami Web Animations API (WAAPI) i CSS Animations API, możesz teraz generować płynne animacje przewijane poza głównym wątkiem za pomocą kilku wierszy kodu. Z tego studium przypadku dowiesz się, jak Tokopedia, redBus i Policybazaar już korzystają z tej nowej funkcji.
Tokopedia
Firma Tokopedia zastąpiła wcześniejsze niestandardowe implementacje JavaScript animacjami generowanymi przez przewijanie, aby zoptymalizować wydajność strony i poprawić ogólne wrażenia z przeglądania stron na ścieżce konwersji e-commerce.
Udało nam się zredukować nawet 80% wierszy kodu w porównaniu ze standardowymi zdarzeniami przewijania JavaScript i zaobserwowaliśmy, że podczas przewijania średnie wykorzystanie procesora spadło z 50% do 2% – Andy Wihalim, starszy inżynier oprogramowania, Tokopedia
Kod
W poniższej implementacji korzysta się z funkcji scroll() do ustawiania anonimowej osi czasu przewijania do kontrolowania postępu animacji CSS. Widoczność górnego paska przyklejonego zależy od pozycji przewijania w zdefiniowanym elemencie 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
Witryna redBus ma różne animacje dla komórek i komputerów na stronie docelowej rzeczy do zrobienia, która jest wyświetlana wszystkim użytkownikom na początku ścieżki konwersji. W przypadku animacji opartych na przewijaniu zespół mógł zastąpić te niestandardowe implementacje JavaScript kodem CSS, aby uzyskać ten sam efekt.
Przykłady zastosowań
Galeria zdjęć z funkcją Image Reveal (na urządzeniach mobilnych) i Okładką (na komputerze).
Kod (komórka)
W poprzednim przykładzie Tokopedia używała anonimowej osi czasu postępu przewijania. W poniższym kodzie redBus używa osi czasu postępu nazwanego widoku. Animacja zmienia opacity i clip-path elementu <img> w zdefiniowanym elemencie animation-range wewnątrz najbliższego elementu przewijania nadrzędnego elementu, co w tym przypadku jest elementem przewijania 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 stanowi idealne połączenie wydajności i wrażeń użytkowników, które zwiększają nasze sygnały dotyczące jakości strony związane z SEO. Dodatkowo minimalistyczna krzywa uczenia się sprawia, że jest to niezbędny dodatek w każdej witrynie e-commerce. Otrzymaliśmy też pozytywne opinie i pomoc ze strony innych zespołów, dzięki którym możemy wykorzystać SDA w przypadku większej liczby użytkowników. – Amit Kumar, starszy menedżer ds. inżynierii w redBus.
Policybazaar
Porównywanie abonamentów ubezpieczeniowych to kluczowe działanie podejmowane przez użytkowników na potrzeby procesu podejmowania decyzji. Za pomocą animacji opartych na przewijaniu Policybazaar zmniejszył rozmiar elementów o niskim priorytecie w odpowiedzi na przewijanie tabeli przez użytkownika. Dzięki temu przewijanie było wygodniejsze, a jednocześnie poprawiła czytelność.
Za pomocą animacji przewijanych udało nam się zmaksymalizować obszar widocznego obszaru, aby użytkownik mógł porównać plany. W ten sposób czytelnik mógł skupić się na przeglądaniu treści.
animate-timeline na tabeli porównawczej planów w sekcji Inwestycje i LifeLOB (Line of Business).Kod
Podobnie jak w poprzednim przykładzie z Tokopedii, Policybazaar używa funkcji scroll() do ustawiania anonimowej osi czasu postępu przewijania do kontrolowania postępu animacji CSS. W tym przypadku zmniejsza się rozmiar czcionki i zanikanie nagłówka zgodnie z pozycją przewijania w zdefiniowanym elemencie 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 wyświetlane podczas przewijania jako typowy wzorzec na całej ścieżce użytkownika
Wszystkie polecane firmy e-commerce korzystały z animacji wyświetlanych na stronach z kartami, aby przyciągnąć uwagę użytkowników . Poniższe przykłady pokazują efekty przewijania na kartach w różnych częściach ścieżki użytkownika. Zwykle uzyskuje się to za pomocą anonimowej osi czasu postępu wyświetlania, która pozwala kontrolować postęp niestandardowej animacji CSS, jak widać w tym fragmencie 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 listą produktów)
Tokopedia (strona ze szczegółami produktu)
Co warto wziąć pod uwagę podczas korzystania z interfejsu Scroll-based Animations API
Animacje oparte na przewinięciu można wprowadzać w przypadku nieobsługiwanych przeglądarek, na przykład przy użyciu kodu polyfill osi czasu przewijania. Użycie kodu polyfill będzie wymagało dodatkowych testów, aby sprawdzić, czy wszystko działa dobrze z Twoją ramką, a w przeglądarkach korzystających z kodu polyfill nie występują błędy animacji ani problemy z niestabilnym działaniem.
W CSS możesz użyć elementu @supports do przetestowania obsługi osi czasu animacji przed użyciem animacji przewijanych. Na przykład:
@supports (animation-timeline: scroll()) {
}
Zasoby
- Wersje demonstracyjne animacji przewijanych
- Tworzenie animacji elementów podczas przewijania za pomocą animacji przewijanych
- Ćwiczenie z programowania: jak zacząć korzystać z animacji opartych na przewijaniu w CSS
- Rozszerzenie do Chrome: debuger animacji oparty na przewinięciu
- Polyfill – oś czasu;
- Czy chcesz zgłosić błąd lub nową funkcję? Chętnie poznamy Twoją opinię
Zapoznaj się z innymi artykułami z tej serii, które opisują korzyści, jakie firmy e-commerce przyniosły korzystanie z nowych funkcji CSS i interfejsu, takich jak przejścia widoku, okienko Popover, zapytania kontenerów i selektor has().