Animacje przewijane to bardzo powszechny wzorzec UX w internecie. Z przewijaniem jest powiązana z pozycją przewijania kontenera przewijania. Oznacza to, że że podczas przewijania 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 paralaksa w tle obrazy lub wskaźniki czytania, które przesuwają się podczas przewijania.
Deweloperzy zwykle tworzą animacje przewijane za pomocą JavaScriptu. , aby reagować na zdarzenia przewijania w wątku głównym. Utrudnia to tworzenie, skuteczne, oparte na przewijaniu animacje, które są zsynchronizowane z przewijaniem, zdarzeń przewijania są dostarczane asynchronicznie i często prowadzą do zacinania się z powodu w wątku głównym.
Jednak w ramach nowej Strony docelowe usług porównywania cen i interfejsu użytkownika w przeglądarkach, teraz możesz czyli tworzenia deklaratywnych animacji przewijanych. Z osią czasu przewijania i widokiem Osie czasu, nowe koncepcje integrujące się z obecnymi Web Animations API (WAAPI) i CSS Animations API możesz mieć jedwabiście gładką animacje z przewijaniem przewijanym w głównym wątku, zawierające tylko kilka wierszy w kodzie. Z tego studium przypadku dowiesz się, jak Tokopedia, redBus i Policybazaar którzy już korzystają z tej nowej funkcji.
Tokopedia
Tokopedia zastąpiła wcześniejsze niestandardowe implementacje JavaScriptu animacji przewijanych, aby zoptymalizować wydajność strony oraz ogólnego przeglądania na ścieżce konwersji e-commerce.
.Udało nam się zredukować do 80% naszych wierszy kodu w porównaniu do konwencjonalnych zdarzeń przewijania JavaScript i zaobserwowaliśmy, że średnie wykorzystanie procesora zmniejszono z 50% do 2% podczas przewijania – Andy Wihalim, starszy inżynier oprogramowania, Tokopedia
Kod
Poniższa implementacja wykorzystuje funkcję scroll()
do ustawienia anonimowego przewijania
oś czasu postępu, która pozwala kontrolować postęp animacji CSS.
widoczność górnego paska przyklejonego zmienia się w zależności od pozycji przewijania w
zdefiniowano 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
RedBus ma różne animacje na komórki i komputery. rzeczy do zrobienia, na której na wczesnym etapie ścieżki konwersji. Animacje przewijane umożliwiają udało nam się zastąpić te niestandardowe wdrożenia JavaScriptu CSS, taki sam efekt.
Przypadki użycia
z galerią zdjęć Image Reveal (z na urządzenia mobilne) i Cover Flow (w przypadku na komputerze).
Kod (komórka)
W poprzednim przykładzie Tokopedia użyła anonimowego postępu przewijania,
. W poniższym kodzie redBus korzysta z postępu nazwanego widoku
. Animacja zmienia opacity
i clip-path
elementu <img>
element w określonym elemencie animation-range
wewnątrz najbliższego elementu
element nadrzędny przewijający, czyli w tym przypadku element przewijający galerię 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%;
}
`;
Bardzo się cieszymy z tej funkcji, ponieważ stanowi idealne połączenie wydajności zwiększających wygodę korzystania z witryny, ulepszając sygnały dotyczące jakości strony na potrzeby SEO. Na górze a minimalna krzywa uczenia się jest niezbędna w każdym e-commerce. witryny. Otrzymaliśmy też pozytywne opinie i wsparcie od innych zespołów Odbiorcy zdefiniowani przez sprzedawcę, aby zwiększyć liczbę ścieżek klienta: Amit Kumar, starszy specjalista ds. inżynierii Menedżer, redBus.
Policybazaar
Porównywanie planów ubezpieczeniowych to powtarzane kluczowe działanie, które użytkownicy wykonują, procesu podejmowania decyzji. Za pomocą animacji opartych na przewijaniu Policybazaar zmniejszył elementów o niskim priorytecie w odpowiedzi na przewijanie przez użytkownika tabeli. Ten udało się płynnie przewijać stronę, a jednocześnie poprawić czytelność.
.Animacje oparte na przewijaniu pozwoliły zmaksymalizować widoczny obszar porównując plany, co zapewnia czytelną i precyzyjną lekturę. – Rishabh Mehrotra, dyrektor Design for Life Insurance BU, PolicyBazaar.
animate-timeline
w tabeli z planem porównawczym w sekcji Inwestycje i Żywotność
LOB (line of Business of Business).Kod
Podobnie jak w przypadku poprzedniego przykładu z Tokopedii, Policybazaar używa funkcji
scroll()
do ustawiania anonimowej osi czasu przewijania dla
i sterować postępem animacji CSS. W tym przypadku zmniejszanie czcionki
i zanikanie nagłówka w zależności od pozycji przewijania w
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 przewijane jako wspólny wzorzec na całej ścieżce użytkownika
Wszystkie polecane firmy e-commerce używały na stronach animacji przewijanych za pomocą kart animowanych, aby zwrócić na nie uwagę użytkownika . poniższe przykłady pokazują efekty przewijania na kartach w różnych częściach użytkownika Zwykle robi się to, korzystając z anonimowego harmonogramu postępu w wyświetlaniu. do kontrolowania postępu niestandardowej animacji CSS, jak widać w tagu z tego fragmentu 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 listą produktów)
Tokopedia (strona z informacjami o produkcie)
Co wziąć pod uwagę podczas korzystania z interfejsu API Scroll-driven Animations
Można stosować kod polyfill w postaci animacji przewijanych, które nie działają w nieobsługiwanych przeglądarkach, na przykład za pomocą Baner polyfill na osi czasu przewijania Jeśli to zrobisz, wymagają dodatkowych testów, aby upewnić się, że będzie dobrze działać a przeglądarki korzystające z kodu polyfill nie napotykają animacji lub nie występują w jej przypadku błędy.
W CSS możesz użyć @supports
, aby przetestować obsługę osi czasu animacji
zanim użyjesz animacji przewijanych. Na przykład:
@supports (animation-timeline: scroll()) {
}
Zasoby
- Wersja demonstracyjna animacji przewijanych
- Animowanie elementów przewijanych za pomocą animacji przewijanych
- Ćwiczenie z programowania: Pierwsze kroki z animacjami przewijanymi w CSS
- Rozszerzenie do Chrome: debuger animacji z przewijaniem
- Plik polyfill na osi czasu przewijania
- Chcesz zgłosić błąd lub nową funkcję? Chcemy poznać Twoją opinię
Zapoznaj się z innymi artykułami z tej serii, w których wyjaśniamy, jak firmy z branży e-commerce skorzystały na zastosowaniu nowych funkcji CSS i interfejsu, takich jak przejścia z widokiem, okienko popover, zapytania dotyczące kontenerów czy selektor has()
.