12 najważniejszych trendów animacji przewijania
Animowane elementy strony są bardzo popularne na stronach docelowych i w witrynach startowych. Ale nie zawsze mówi się o nich w kręgach projektowych, ponieważ pomysł "animacji na widoku" nie jest bardzo obszerny.
Używam frazy "przewiń do widoku", ponieważ wydaje się być dokładnym opisem. Zasadniczo podczas przewijania strony pojawiają się nowe animowane elementy.
To nie jest technika, która działa na każdej stronie, ale dodaje miłego akcentu do niektórych układów. I poleciłem niektórym z moich ulubionych, aby pokazać, jak działają te animacje przewijania do widoku i dlaczego warto je wykorzystać samemu.
1. Jutro spać
Na Jutro spać Strona internetowa zauważysz kilka dość łagodnych efektów animowanych. Powodują one zanikanie różnych fragmentów tekstu i wezwań do działania w całym układzie.
Co ciekawe, większość obrazów i obszarów tła jest w pełni widoczna nawet przy pierwszym przewijaniu. Wiele stron internetowych korzysta z zanikającej animacji, aby wyświetlać obrazy i zrzuty ekranu, zachowując jednocześnie widoczność tekstu.
Ta niewielka różnica pomaga zwrócić uwagę na tekst, który znika. Świetny sposób na przyciągnięcie uwagi odwiedzających przeglądających.
2. Twist
Inną techniką, którą często widzę, jest kierowanie większości treści strony na animacje przewijania.
Na przykład Twist strona główna aplikacji zawiera różne segmenty strony i bloki tekstu, które animują i przewijają widok na przewijanie. Mają bardzo delikatny efekt zanikania, więc są zauważalne, ale nie zbyt ostre.
Niektórzy goście mogą być zirytowani opóźnieniem, ale nie sądzę, że to za długo. Dodatkowo animuje się tylko jeden raz, więc jeśli trafisz na dół strony, wszystkie animacje są gotowe.
3. Przędza App
Dla znacznie bardziej złożonych animacji sprawdź Aplikacja przędzy lądownik. Ten ma wieloczęściowe animacje, a nawet elementy, które pojawiają się pod różnymi kątami.
Niektóre obrazy demonstracyjne zrzutu ekranu animują się w górę, a towarzyszące im wzorce tekst / BG animują się w widoku. Ten naprzemienny styl jest dość wyjątkowy i nie jest czymś, co widzę często.
Strona docelowa jest jednak niezwykle prosta i nie ma tu zbyt wiele uwagi. W takim przypadku różne animacje działają ładnie.
4. DashFlow
Spośród wszystkich tych przykładów myślę DashFlow używa najczęściej używanych technik animacji.
Ten lądownik wyświetla obraz i tekst w jednym miejscu. Jest naprawdę prosty i wykorzystuje układ jednokolumnowy, więc cała treść przepływa prosto w dół w liniowej ścieżce.
Nic niezwykłego w tym projekcie poza bardzo wyraźną metodą animowania przedmiotów na przewijaniu. Świetny styl, jeśli masz podobną stronę internetową i chcesz, aby animacje były proste.
5. Quuu Promuj
Quuu Promuj utrzymuje animacje do minimum i używa ich tylko w obszarach CTA.
Nie mogę powiedzieć, czy to zwiększa liczbę konwersji, ale wydaje się, że jest to cel. Po pierwszym załadowaniu strony wyświetlany jest najwyższy nagłówek z animacją przechylania w CTA.
Podczas przewijania w dół zauważysz, że reszta strony jest dość statyczna. Ale na dole znajduje się jedno ostateczne wezwanie do działania nad stopką, które również animuje i uruchamia tę samą animację przechylającą.
Przechodzi, aby pokazać, że możesz mieć animowane efekty przewijania, które nie są wyświetlane na całej stronie.
6. Qonto
Strona główna dla Qonto ma ciekawe podejście do animacji przewijania do widoku. Korzysta z tego samego rodzaju animacji na całej stronie i animuje poszczególne elementy do widoku z boku.
W przypadku większości stron obejmuje to sekcje ikon z małą grafiką nad treścią wyjaśniającą funkcje aplikacji. Niezbyt subtelny, ale nie nazbyt jawny.
Dodatkowo możesz znaleźć kilka innych stylów animacji w nagłówku wraz z niektórymi obrazami BG, które znikają w widoku. Ta strona to wspaniały przykład tego, co animacja internetowa może zrobić.
7. Wycieczka
Na przykład subtelnych animacji sprawdź Wycieczka .
Ich strona zawiera naprzemiennie animowane elementy i elementy stałe. Efekty animacji są jednak szybkie, więc nie musisz się denerwować, czekając na widoczną zawartość.
To jest moja preferencja dla efektu przewijania do animacji. To zawsze piękna technika, ale czas musi być szybki i na czasie. Nikt nie chce czekać na treść, a Hike rozumie to.
8. Project Fi
Jeśli jest ktoś, kto zna świetny UX, to Google. I we wszystkich swoich produktach mają mnóstwo stron docelowych, Project Fi będąc jednym z przykładów fantastycznych animacji.
Dotyczą one tylko ikon i nie znikają w widoku, ale pojawiają się z dołu na stronie. Podczas przewijania znajdziesz ikony, które przesuwają się do widoku dla każdej małej sekcji.
To dość subtelny efekt, ale dodaje trochę życia do projektu. Opiera się to wyłącznie na pozycji widza na stronie, więc jeśli przewiniesz do góry i zejdziesz na dół, zostaniesz przywitany tymi samymi efektami animacji.
9. Baza
The Podstawowa strona główna CRM to doskonały przykład prostej animacji w pracy. Ta strona używa niestandardowych efektów animacji, aby przesuwać obrazy w górę i do linii oczu widza.
Biorąc pod uwagę liczbę stron docelowych, które widzę codziennie, jest to bardzo typowe dla tego, czego się spodziewam. To nie jest skomplikowana animacja do odtworzenia i nie wpływa zbytnio na doświadczenie.
Jedno chciałbym, żeby animacje ładowały się nieco szybciej. Poza tym uważam, że jest to świetny przykład animowania obrazów na przewijaniu z bardzo przejrzystym układem do uruchomienia.
10. AnyList
Wszystkie najlepsze aplikacje mobilne mają własne strony internetowe do promocji. A najlepsze z nich mają zazwyczaj całkiem niezłe style animacji.
AnyList łączy ze sobą kilka różnych technik na jednej stronie. Ich nagłówek animuje się spod odciętego obszaru, ale jest to jedyna "ruchoma" animacja na stronie.
Cała reszta po prostu znika i wszystko to wykorzystuje dość szybki czas ładowania animacji. Techniki te są stosowane w innym miejscu na stronie, co zapewnia bardziej spójny styl.
11. Ernest
Styl strony dla Ernest różni się nieco od innych stron docelowych, które omówiłem.
To używa animacje przewijania paralaksy utworzyć ruch na pojedynczym układzie strony z różnymi sekcjami.
Różnią się one w zależności od kierunku przewijania, niezależnie od tego, czy poruszasz się w górę, czy w dół i przy jakiej prędkości. Różnią się one także intensywnością w zależności od różnych sekcji strony.
Możesz nawigować za pomocą bocznego menu nawigacyjnego, a to szybko przeskakuje wokół strony do różnych obszarów. Jest to jedna z niewielu technik, które często widzisz na stronach paralaksy i na pewno pomaga wyróżnić się z tłumu.
12. TaxiNet
Aby rzucić okiem na pełnoekranowe animacje w akcji, spójrz na TaxiNet stronie internetowej.
Jest to szwedzki zbiór animowanych efektów przewijania związanych z ikonami, tekstem, obrazami, a nawet stylami tła. Poszczególne kolory tła strony animują się w widoku z użytkownikiem, zdecydowanie nie jest to typowa technika, ale z pewnością ciekawa.
Jeśli podoba ci się ten styl, możesz zastosować podobne podejście do swojej własnej strony docelowej. Upewnij się, że animacje są szybkie i szybkie, ponieważ nikt nie chce czekać na ładowanie animacji.
Ale jeśli zrobisz to dobrze, te elementy przewijania do widoku dodadzą fajnego efektu każdej stronie docelowej.
