Animacje przewijane – studia przypadków

Swetha Gopalakrishnan

Saurabh Rajpal

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.

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().

• Dlaczego funkcje interfejsu internetowego są ważne w przypadku witryny e-commerce?
• Zobacz studia przypadków dotyczące przenoszenia
• Studia przypadków dotyczące interfejsu Popover API
• Zapytania dotyczące kontenerów – studia przypadków
• :has() – studia przypadków