14 oszałamiających witryn z przewijaniem paralaksy

Przewijanie paralaksy istnieje już od jakiegoś czasu, ale jest to jeden z tych trendów w projektowaniu stron internetowych, który po prostu nie ustaje. Przewijanie paralaksy ma miejsce, gdy układ strony internetowej widzi, że tło strony internetowej przesuwa się wolniej na pierwszy plan, tworząc efekt 3D podczas przewijania. Używana oszczędnie może zapewnić miły, subtelny element głębi, który zaowocuje wyróżniającą się i zapadającą w pamięć stroną internetową.

Aby pokazać, jak należy to zrobić, oto kilka witryn, które wykorzystują tę technikę do doskonałego efektu. W niektórych przypadkach przewijanie paralaksy jest gwiazdą programu; w innych po prostu dodaje odrobinę głębi, która sprawia, że pierwszy plan wydaje się trochę wyskakiwać.

Jeśli masz ochotę naprawdę wypchnąć łódź, te imponujące przykłady animacji CSS pokazują kolejny świetny sposób na wyróżnienie witryny z tłumu. Możesz także sprawdzić nasze najlepsze narzędzia do projektowania stron internetowych, które „pomogą Ci w projektowaniu. Na razie jednak przyjrzyjmy się niektórym witrynom korzystającym z przewijania paralaksy we właściwy sposób.

Historia sztuki projektowania stron internetowych

Historia sztuki i projektowania stron internetowych nie są tematami, które koniecznie trzeba by połączyć, ale są one pięknie zjednoczeni w tej witrynie poświęconej historii sztuki projektowania stron internetowych, która śledzi przyszłość projektowania stron internetowych, patrząc na sztukę w czasie.

W grze jest wiele technik przewijania paralaksy, co oznacza, że użytkownicy są nieustannie zaskoczeni i zachwyceni podczas przewijania strony. Warto poświęcić trochę czasu na zbadanie tego.

Katalog interaktywny Qode

Katalog interaktywny Qode zawiera stylizowany dolny system nawigacji tekstowy do ujawnienia obraz dla każdego przedmiotu. Kliknięcie katalogu powoduje wyświetlenie poziomego przewijania paralaksy używanego do zaprezentowania szeregu motywów WordPress. Nie jest to najbardziej przełomowe zastosowanie przewijania paralaksy na tej liście, ale dobrze spełnia swoje zadanie. Z dobrym skutkiem wykorzystuje się również rozpryski animacji.

Kanały

Zaprojektowany przez Marcusa Browna i opracowany przez Aristide Benoist, Canals zabierze Cię w 400-letnią podróż po historii kanałów w Amsterdamie z XVII wieku. Witryna została zaprojektowana tak, aby zapewnić doświadczenie redakcyjne , jak przeglądanie bujnej objętości stolika do kawy, i świetnie wykorzystuje paralaksę, aby zwrócić Twoją uwagę na nowe sekcje swojej historii i nadać witrynie subtelny efekt głębi.

Historia The Goonies

Każdy w pewnym wieku ma gwarancję miłości „80s te pl film przygodowy, The Goonies, a jeśli to ty, to ta strona z pewnością sprawi, że twoje gruczoły nostalgii zaczną pulsować. Stworzony przez Josepha Berryego przy użyciu WebFlow, The Story of The Goonies to hołd dla klasycznego stylu retro, który wykorzystuje przewijanie paralaksy, aby wciągnąć Cię w fabułę, przedstawić postacie i tryb ujawnienia filmu.

Dogstudio

Bezpośrednią główną atrakcją witryny Dogstudio jest piękny animowany pies 3D – czy to wilk? – na środku strony, który skaluje się i obraca podczas przewijania w dół strony paralaksy. Jego oświetlenie zmienia kolor, gdy najeżdżasz kursorem na tytuły ostatnich projektów Dogstudio i być może naszym ulubionym fragmentem jest obracanie się przed częścią kopii strony, zasłaniając część tekstu.

ToyFight

ToyFight to wielokrotnie nagradzana agencja kreatywna i jego strona internetowa to świetna zabawa. Założyciele Jonny Lander i Leigh Whipday zamienili się w trójwymiarowe postacie, które pojawiają się w wielu scenach w całej witrynie (w tym w tym bezczelnym Sagmeister & Walsh). Sprytne użycie paralaksy wzmacnia efekt 3D i w połączeniu z odważnym, jasnym, prostym tłem, nigdy nie staje się przytłaczające ani irytujące.

Diesel: BAD Guide

84.Paris stworzył tę imponującą witrynę paralaksy (i związaną z nią kampanię w mediach społecznościowych), aby towarzyszyć wprowadzeniu na rynek zapachu BAD marki Diesel. Jednostronicowa witryna przedstawia serię zasad, które składają się na „BAD Guide”.

Użytkownik może eksplorować, przeciągając myszą po stronie paralaksy, która jest ułożona jak tablica z obrazkami do kliknięcia. Jest rada na temat wszystkiego z Tindera („Przesuń w prawo, w prawo, w prawo, w prawo – posortujesz je” później ”) na Instagram („ Nie zapomnij skontaktować się z byłym w czwartki #TBT ”) wraz z monochromatycznymi ilustracjami.

Firewatch

Jedna z Najpiękniejszymi przykładami przewijania paralaksy, jakie widzieliśmy, jest ta strona internetowa gry Firewatch, która wykorzystuje sześć ruchomych warstw, aby stworzyć wrażenie głębi. To wspaniałe, ponieważ nie ma przechwytywania przewijania (coś, co często towarzyszy efektowi paralaksy) i jest używane tylko na górze strony – reszta witryny jest nieruchoma, więc możesz przeczytać informacje bez choroby morskiej. Jeśli chcesz zobaczyć, jak to się robi, oto fajne demo na CodePen.

GitHub 404

Strona 404 na GitHubie nie jest przewijaniem paralaksy, ponieważ efekt ma miejsce przy poruszaniu myszą w przeciwieństwie do przewijania, to naprawdę zabawna strona, która wykorzystuje warstwy, aby dodać głębi. W przeciwieństwie do „właściwej” paralaksy, tło porusza się szybciej niż pierwszy plan, tworząc dezorientujące, nieziemskie wrażenie.

Jess & Russ

Nic dziwnego, że strona internetowa ślubnej pary Russa Maschmeyera i Jessiki Hische jest pięknością, którą można zobaczyć. Witryna przedstawia ich romantyczną historię, wykorzystując przewijanie paralaksy w celu dodania głębi ilustracjom. Pobrali się w 2012 roku, ale nadal warto zajrzeć na tę stronę.

Niech Twoje pieniądze mają znaczenie

Finanse i pieniądze nie są najciekawszymi tematami. Ale nowojorska agencja cyfrowa Firstborn bierze udział w tej dynamicznej, przewijanej paralaksie stronie internetowej Make Your Money Matter for the Public Service Credit Union.

W celu nauczenia opinii publicznej korzyści płynących z przystąpienia do unii kredytowej, zamiast korzystać z banku, ta genialna strona zawiera wszystko, od tego, jak działa kasy pożyczkowe, po to, gdzie ją znaleźć i jak złożyć wniosek, a także kalkulator pokazujący, ile banki zarabiają na depozytach klientów.

Madwell

Agencja projektowo-rozwojowa Madwell z siedzibą w Nowym Jorku prezentuje swoje portfolio za pomocą szeregu efektów przewijania paralaksy, aby stworzyć zauważalny styl 3D, który dodaje ogromnego ilość głębi.

New York Times: Tomato Can Blues

W dzisiejszej erze niskiego czasu skupienia uwagi i niewielkich rozmiarów mediów, jak przyciągasz ludzi do długofalowego dziennikarstwa? Tomato Can Blues to świetna odpowiedź na ten problem z New York Times, łącząca sprytne techniki projektowania stron internetowych z opowiadaniem historii i ilustracjami inspirowanymi komiksami stworzonymi przez Atilla Futaki.

Jeden z najlepszych przykładów przewijania paralaksy, „Jak widzieliśmy, artykuł prowadzi Cię przez historię wojownika w klatce napisaną przez Mary Pilon. Gdy przewijasz zawartość, ilustracje ożywają dzięki sprytnym animacjom i zmianom, pozwalając Ci w pełni zanurzyć się w treści.

Ilustracje Futaki były oparte na aktach policyjnych, relacjach świadków, zdjęciach i notatkach reportera, a dbałość o szczegóły jest widoczna. Podsumowując, to wspaniałe doświadczenie w czytaniu – czy to jest przyszłość dziennikarstwa internetowego ?

Śnieg

Jedna z pierwszych witryn, naprawdę przesuwaj granice tego, co można zrobić z długimi treściami redakcyjnymi online, artykuł „Snow Fall” w New York Times łączy w sobie szereg różnych elementów, w tym przewijanie paralaksy i wideo internetowe.

Artykuł o horrorze lawiny w Tunnel Creek został opublikowany online w grudniu 2012 roku, ale nadal jest mocnym przykładem tego, co można zrobić z przewijaniem paralaksy. Gazeta przedstawiła artykuł, który zdobył nagrodę Pulitzera w nowatorski sposób, który przyciągnął uwagę społeczności projektantów na całym świecie.

• 19 naprawdę przydatnych responsywnych samouczki projektowania stron internetowych
• najlepsze zewnętrzne dyski twarde
• Doskonale zaprojektowane strony błędów 404