W artykule:
Przewijanie paralaksy jest czymś, co często widzimy w nowoczesnym projektowaniu stron internetowych. Dlaczego? Ponieważ daje iluzję ruchu i głębi, co w połączeniu ze statyczną i długo przewijaną witryną dodaje intrygi i podniecenia—idealne, gdy chcesz przyciągnąć uwagę odwiedzającego.
Dla tych z Was, którzy myślą: “a co z innymi rzeczami, które pomagają przyciągnąć i utrzymać uwagę naszych gości?”Masz rację. Możesz dodać wideo. Możesz nadać swojej stronie lifting inspirowany ilustracją. Możesz nawet skondensować wszystkie wysokiej jakości zdjęcia w przyciągający wzrok suwak.
Istnieje wiele sposobów, aby zaczepić odwiedzających i zainspirować ich do pozostania trochę dłużej. Ale jeśli nie masz zasobów, aby stworzyć film, nie uważasz, że ilustracje działają dobrze z estetyką witryny lub nie masz zdjęć do pokazania w slidedeck, efekt paralaksy może być idealnym sposobem na zachwycenie odwiedzających.
Wprowadzenie do efektu paralaksy
Widziałeś już efekt paralaksy. Przewijasz stronę w dół i wygląda na to, że pierwszy plan obrazu jest stabilny, gdy tło przesuwa się obok. To iluzja trójwymiarowa stworzona przez przesuwanie różnych elementów obrazu z różną prędkością.
Efekt paralaksy lub przewijanie paralaksy w projektowaniu stron internetowych zawiera warstwowe obrazy, które poruszają się z różną prędkością, tworząc iluzję głębi podczas przewijania strony, coś w rodzaju efektu faux-3D. Zazwyczaj tło porusza się wolniej niż pierwszy plan. Technika ta wykorzystuje przewijanie, aby ujawnić nową zawartość i działa podobnie do witryn jednostronicowych, w których cała zawartość znajduje się na jednej stronie.
To jest fajny efekt, który może zmienić nudną stronę w coś zabawnego i ekscytującego – a nawet trochę seksownego.
Termin paralaksa pochodzi od greckiego dzieła parallaxis, oznaczającego zmianę. Pobliskie obiekty mają większą paralaksę niż bardziej odległe obiekty widziane z różnych pozycji, więc przewijanie paralaksy może być użyte do określenia odległości.
Chcesz zobaczyć inne fajne przykłady tego, jak przewijanie paralaksy jest używane w Internecie? Proszę bardzo.:
Anakin
Strona studia projektowego Anakin.
Na pierwszy rzut oka strona Anakin Design Studio wygląda, jakby miała typowy przewijak paralaksy. Przewijasz w dół obok obrazu bohatera i, oczywiście, jest to wystarczająco ładny efekt, ale to nic specjalnego. Następnie przewijasz w dół nieco dalej i obserwujesz, jak wykorzystują wycięcia z efektem paralaksy. Teraz, to Super.
Anton & Irene
Jeśli pierwszą rzeczą, którą zrobisz na stronie Anton & Irene, jest najechanie kursorem na dwie zamaskowane postacie u góry strony głównej, bez wątpienia będziesz się bawić. Gdy jednak zaczniesz przewijać, przygotuj się na kolejne zaskakujące zaangażowanie w postaci dwóch cyfr i ujawnij szczegóły dotyczące firmy. Podczas przewijania zauważysz, że przewijanie uruchamia również różne fragmenty informacji i obrazów, które przesuwają się na ekran. Jest to świetny sposób na pozostawienie trwałego wrażenia na odwiedzających.
Każda Ostatnia Kropla
Efekt paralaksy na stronie every Last Drop służy jako rodzaj mechanizmu opowiadania historii. Gdy przewijasz dalej w dół, fragmenty informacji o rozmiarach infografiki strzelają, aby zapewnić ustawienie, podczas gdy nasz bohater prowadzi nas przez swój dzień zużycia wody.
Straż Pożarna
Ten pokazuje bardzo prosty efekt przewijania paralaksy, ale jest pięknie wykonany. Biorą uderzające wizualne, które wygląda jak to może pochodzić prosto z filmu animowanego i użyć przewijania, aby utrzymać odwiedzających zaangażowanych wystarczająco długo, aby dotrzeć do zwiastuna gry wideo Firewatch.
Jess & Russ
Byłeś kiedyś na tych stronach z ogłoszeniami ślubnymi i poczułeś potrzebę szybkiego naciśnięcia przycisku “Wstecz”? To nie jest jedna z tych rzeczy. Strona z ogłoszeniami ślubnymi Jess & Russ wykorzystuje efekt przewijania paralaksy, aby stworzyć nie tylko ruchomy efekt osi czasu, ale także urozmaicić zabawne ilustracje, które stworzyli.
La Moulade
Studio Kreatywne La Moulade zastosowało wspólną technikę projektowania, taką jak przewijanie paralaksy i wykorzystało ją w sposób unikalny dla swojej marki. Oprócz używania przewijania do przesuwania tekstu i obrazów poza środek ekranu, zwróć uwagę na to, co dzieje się z ich nawigacją podczas przewijania dalej w dół strony. Linia pod małym paskiem nawigacyjnym wypełnia się, informując cię, gdzie dokładnie jesteś przez cały czas.
Make Your Money Matter
Ta konkretna strona, Make Your Money Matter, otrzymuje regularne krzyki ze względu na wykorzystanie wielu innowacyjnych technik projektowania: ilustracji, stron przejścia, animacji, a teraz efektu paralaksy. Ta jest podobna do każdej ostatniej kropli, która używa przewijania, aby wywołać efekt opowiadania historii. Główną różnicą jest to, że ta historia pomieszała ją między przewijaniem w lewo i w prawo, a także u góry i u dołu.
Wrapping Up
Ponieważ starasz się znaleźć nowe sposoby, aby Twoja strona wyróżniała się z tłumu i przyciągała uwagę odwiedzających, na które zasługuje, zachęcam cię, abyś nie czuł, że musisz robić coś drastycznego. Czasami coś tak prostego jak zastosowanie przyciągającego uwagę efektu paralaksy jest wszystkim, czego potrzebujesz, aby uzyskać tylko kilka sekund od odwiedzających, zanim dostarczysz niezaprzeczalnie atrakcyjne wezwanie do działania.
Tagi:
