12 niesamowitych przykładów inspiracji stron internetowych z przewijaniem paralaksy

Opublikowany: 2015-06-15

Przewijanie paralaksy jest tematem rozmów w mieście od kilku lat . Coraz więcej projektantów wdraża element projektu na swojej stronie internetowej i w ten sposób oszukuje użytkownika, że ​​cała witryna jest trójwymiarowa.

Dzisiaj przyjrzymy się niesamowitym przykładom stron Parallax Scrolling. Strona stworzona za pomocą przewijania paralaksy jest przykładem postępu w technologii webowej, zwłaszcza HTML i CSS.

Mimo że ta technika jest super fajna, nie jest poprawnie zaimplementowana przez wiele witryn, co może spowodować złą nazwę używanej techniki. Aby zainspirować Cię jako programistę stron internetowych, a także zrozumieć, jak dobrze wygląda metoda paralaksy, przedstawiamy niesamowite przykłady stron z przewijaniem paralaksy.

Słowo paralaksa oznacza „zmianę”, co oznacza, że ​​obiekty bliskie mają mniej zmian niż obiekty dalekie, dając złudzenie ruchu. Większość technologii renderowania 3D używanych w grach to techniki oparte na iluzji, które wykorzystują sposób działania naszego mózgu i wykorzystują je na swoją korzyść.

Spis treści

1. Królewski Legion Brytyjski

Świetna strona internetowa Royal British Legion. Oddaje hołd człowiekowi służby i edukuje publiczność o ich trudach. Mając odpowiedni komunikat i odpowiednie przewijanie paralaksy, możesz ostatecznie zrozumieć znaczenie witryny.

Głównym motywem serwisu jest dotarcie z przekazem do odbiorców bez zbytniego skomplikowania i bez zbytniego dosadności.

1-brytyjska-wojskowa

2. Leczenie farmakologiczne

Zażywanie narkotyków jest jednym z głównych problemów w naszym społeczeństwie, a rehabilitacja narkotykowa jest ważną częścią naszego ekosystemu, dzięki czemu każdy ma szansę wyzdrowieć i rozpocząć normalne życie. Ważniejszym aspektem strony internetowej są obrazy tła i to, jak dobrze się czują w miejscu, nie będąc zbyt trudnym dla użytkownika.

Informacje są rozjaśniane poprawnie i dokładnie.

Leczenie 2-lekowe

3. Za młody na ślub

Kolejna świetna strona internetowa, która podkreśla tragiczny problem w naszym społeczeństwie. Strona jest długa i zagłębia się w problemy małżeństw dzieci.

Podstawowym kolorem strony internetowej jest czerwony i oferuje świetne przewijanie paralaksy do strony. Wiele małych animacji zostało włożonych w projekt strony i cieszę się, że znalazłem stronę, aby ją tutaj wymienić.

3-za młoda na ślub

4. Greenman

Greenman to mieszanka przewijania paralaksy, świetnej kombinacji kolorów i ogólnej wartości estetycznej. Strona jest powiązana z Welsh Festival Green Man. Witryna zawiera również elegancki odtwarzacz muzyki na dole strony.

Strona jest tworzona przez studio YCN i jest doskonałym przykładem efektu paralaksy scrolling.

4-greenman

5. InTaco 10 lat

Do tej pory widzieliśmy stronę z przewijaniem paralaksy, która zaczyna się od góry, ale ta strona odwraca zasadę i zaczyna od dołu.

Strona jest tworzona przez cyfrowych partnerów inTaco i starają się pokazać swoją dziesięcioletnią podróż za pomocą przewijania paralaksy rakiety zdolnej do latania w głębinach kosmosu.

Witrynę można przeglądać na dwa sposoby. Jeden przez automatyczny (preferowany) i ręczny. Bardzo podobała mi się ta strona internetowa i ty też to zrobisz.

5-intaco

6. Marmozeta

Marmoset to kolejny przykład wykorzystania przewijania paralaksy na korzyść. Strona jest związana z muzyką i oferuje świetne wrażenia wizualne.

Duży pasek wyszukiwania oferuje świetny element projektu na stronie. Witryna korzysta z minimalnego przewijania paralaksy, ale poprawiła komfort użytkowania.

6-marsomot

7. Wniebowstąpienie Latorre

AscensionLatorre to firma meblowa, która zaznaczyła swoją obecność w Internecie. Korzystanie z przewijania paralaksy na stronie jest niesamowite. Kolory użyte na stronie to ciemne i złote.

7-lattore

8. Ala

Strona Ala jest pełna kolorów i świetnie zaprojektowana. Ala to studio, które skupia swoje talenty na ilustracjach, interakcji i projektowaniu interfejsów.

Strona w pełni wykorzystuje duże czcionki i inne elementy nowoczesnego projektowania stron internetowych.

8-ala

9. Blues w puszce z pomidorami

Świetna strona internetowa oparta na historii, stworzona przez czasy New York. Ilustracja i niezwykle przyciągająca wzrok, a znajdziesz się w słowach i sprytnym użyciu przewijania paralaksy.

Strona internetowa jest niezwykle długa i z pewnością sprawi, że będziesz się bawić oferowanymi przez nią treściami. Sprawdź to.

9-pomidorów-niebieskie

10. Gry mózgowe: 13 powodów, dla których kochamy infografiki

Interaktywna infografika wyjaśniająca, dlaczego nasze mózgi ją uwielbiają. Infografika wykorzystuje zaawansowane przewijanie paralaksy i zapewnia doskonały wgląd w to, dlaczego tak bardzo kochamy infografikę.

Infografika jest tak atrakcyjna i atrakcyjna, że ​​Google tworzy rankingi stron internetowych, które zawierają infografiki, aby zaprezentować informacje użytkownikowi.

Ponieważ zapamiętujemy 80% tego, co widzimy, infografika jest świetnym narzędziem do maksymalizacji przekazu informacji.

Niesamowite przykłady witryn z przewijaniem paralaksy

11. Airbnb w Berlinie

Airbnb to firma zajmująca się zakwaterowaniem, która jest popularna ze względu na znajdowanie wyjątkowego zakwaterowania dla ludzi na całym świecie.

Ich obecność w Berlinie została przyjęta przez wspaniałą stronę internetową, która prezentuje przewijanie paralaksy. Pierwszym elementem zaskoczenia jest sposób, w jaki weszli na mapę Berlina z mapy świata. Pozostałe elementy strony internetowej są również unikalnie zaprojektowane, dzięki czemu strona internetowa ma odpowiedni klimat i dotyk.

11-airbnb

12. Space Needle Seattle

Space Needle Seattle to jedna z najlepszych stron internetowych z przewijaniem paralaksy w Internecie. Jest to unikalny sposób prezentacji informacji, który pozwala z łatwością uchwycić wszystkie sześć zmysłów.

Winda idzie w górę, prezentując różne aspekty Seattle ze Space Needle.

12-miejscowa igła

Zakończyć

Mam nadzieję, że spodobały Ci się fantastyczne przykłady stron z przewijaniem paralaksy. Technika paralaksy nie zniknie, a dzięki wdrożonej technice pełnoekranowej i dużej czcionki strony wyglądają jeszcze lepiej.

Nie od dziś wiadomo, że świetna strona internetowa to zbiór małych technik. Istnieje wiele witryn, które wykorzystują zaawansowane techniki projektowania, w tym przewijanie paralaksy, duże czcionki, przyciski duchów, projektowanie materiałów, rozwijane menu i wiele innych, aby stworzyć najlepiej wyglądającą witrynę w historii!

Masz w głowie świetną stronę o wyglądzie paralaksy? Skomentuj poniżej i daj nam znać.