14 зашеметяващи уеб страници с паралакс превъртане

паралакс превъртане: уеб дизайн и история на изкуството
(Кредит за изображение: Уеб дизайн и история на изкуството)

Превъртането Parallax съществува от известно време, но това е една от тенденциите в уеб дизайна, която просто продължава. Паралаксното превъртане е, когато оформлението на уебсайта вижда фона на уеб страницата да се движи с по-ниска скорост на преден план, създавайки 3D ефект, докато превъртате. Използва се пестеливо, той може да осигури приятен, фин елемент на дълбочина, който води до отличителен и запомнящ се уебсайт.

За да покажем как трябва да се направи, ето няколко сайта, които използват техниката с брилянтен ефект. В някои случаи превъртането с паралакс е звездата на шоуто; в други това просто добавя докосване на дълбочина, което кара предния план да изглежда малко изскачащ.



Ако наистина искате да изтласкате лодката, това е впечатляващо CSS анимация примери показват още един чудесен начин да накарате уебсайта Ви да се откроява от тълпата. Можете също така да проверите най-доброто от нас инструменти за уеб дизайн това ще ви помогне в начинанията по проектиране. Засега обаче нека да разгледаме някои сайтове, използващи паралакс превъртане по много правилния начин.



01. История на изкуството на уеб дизайна

паралакс превъртане: уеб дизайн и история на изкуството

Научете за историята на изкуството чрез поредица от паралакс превъртащи ефекти(Кредит за изображение: Уеб дизайн и история на изкуството)

Историята на изкуството и уеб дизайна не са теми, които непременно бихте събрали, но те са прекрасно обединени в това история на изкуството на уеб дизайн сайт, който проследява бъдещето на уеб дизайна, като разглежда изкуството през времето.



Тук се играят редица техники за превъртане с паралакс, което означава, че потребителите са постоянно изненадани и доволни, докато превъртат надолу по страницата. Това си заслужава да отделите малко време за проучване.

как да направите лого на звукозаписен лейбъл

02. Интерактивният каталог на Qode

превъртане с паралакс

Продължете да превъртате, за да разгледате предлаганите тук теми на WordPress(Кредит на изображението: Интерактивният каталог на Qode)

The Интерактивен каталог на Qode има стилизирана долна навигационна система за текст, за да разкрие изображение за всеки елемент. Кликването върху каталога след това вижда хоризонтално скролиране с паралакс, използвано за показване на набор от теми на WordPress. Това не е най-новаторското използване на превъртане с паралакс в този списък, но то служи добре на целта си. Разпръскването на анимация също се използва с добър ефект.



03. Канали

Превъртане с паралакс: Канали

Canals е като да разлистваш голяма книга с масички за кафе(Кредит за изображение: Канали)

Проектиран от Marcus Brown и разработен от Aristide Benoist, Канали ще ви отведе на 400-годишно пътешествие през историята на каналите от Амстердам от 17 век. Сайтът е проектиран да осигури преживяване в редакционен стил, като например разглеждане на пищния том на масичката за кафе, и използва чудесно паралакса, за да привлече вниманието ви към нови раздели от неговата история и да даде на сайта фин ефект на дълбочина.

04. Историята на The Goonies

Превъртане на паралакс: Историята на Goonies

Вземете тук сладък ретро хит от 80-те(Изображение на изображението: Историята на The Goonies)

Всеки на определена възраст е гарантиран за любовта от 80-те години на тийнейджърското приключение, The Goonies, и ако това сте вие, този сайт със сигурност ще накара носталгичните ви жлези да пулсират. Създадено от Джоузеф Бери с помощта на WebFlow, Историята на Goonies е почит към ретро класика, която използва превъртане с паралакс, за да ви привлече в историята, да ви запознае с героите и да разкрие режима за филма.

нещо, което да нарисувате на ръката си

05. Догстудио

Превъртане с паралакс: DogStudio

Анимираният 3D doggo е звездата на шоуто тук [Изображение: Dogstudio]

Непосредственото фокусно привличане на Догстудио Сайтът е красиво анимирано 3D куче - или е вълк? - в центъра на страницата, която се мащабира и завърта, докато превъртате надолу по страницата на паралакса. Осветлението му променя цвета, докато задържите курсора на мишката върху заглавията на последните проекти на Dogstudio и може би любимият ни бит е, когато се върти пред част от копието на страницата, закривайки част от текста.

06. ToyFight

Превъртане с паралакс: ToyFight

И Джони, и Лий са анатомично правилни [Изображение: ToyFight]

ToyFight е награждавана творческа агенция и нейният уебсайт е много забавен. Основателите Джони Ландър и Лий Уипдей се превърнаха в триизмерни фигури, които се появяват в редица сцени в целия сайт (включително тази нахална справка за Sagmeister & Walsh). Умното използване на паралакс усилва 3D ефекта и съчетано със смели, ярки, обикновени фонове, никога не става непреодолимо или дразнещо.

07. Дизел: BAD Guide

паралакс превъртане: Дизел

BAD Guide на Diesel работи като виртуална табла [Изображение: Diesel]

84. Париж създаде този впечатляващ уебсайт за паралакс (и свързаната с него кампания в социалните медии), за да придружи пускането на BAD аромата на Diesel. Сайтът от една страница представя поредицата от правила, които съставляват „ЛОШОТО ръководство“.

Потребителят може да изследва, като плъзга мишката около паралаксната страница, която е разположена като щифт от изображения, върху които да щракнете. Има съвети за всичко от Tinder („Плъзнете надясно, надясно, надясно, надясно - ще ги подредите по-късно“) до Instagram („Не забравяйте да се свържете с бивш в четвъртък #TBT“), придружен от монохромни илюстрации.

08. Firewatch

Екранна снимка на уебсайта Firewatch показва илюстрация на турист, който гледа над златен каньон в зори

Всеки слой дървета се движи независимо [Изображение: Campo Santo]

Един от най-красивите примери за превъртане с паралакс, който сме виждали, е този уебсайт за играта Firewatch , който използва шест подвижни слоя, за да създаде усещане за дълбочина. Страхотно е, защото няма отвличане на превъртане (нещо, което често придружава ефекта на паралакса) и се използва само в горната част на страницата - останалата част от сайта все още е, за да можете да четете информацията, без да се разболявате от море. Ако искате да видите как се прави, ето една хубава демонстрация CodePen .

09. GitHub 404

Превъртане с паралакс: екранна снимка на GitHub

404 на GitHub нарушава правилата на паралакса за дезориентиращ ефект [Изображение: GitHub]

404 страница на GitHub не е строго паралаксно превъртане, тъй като ефектът се случва върху размахване на мишката, за разлика от превъртането, но това е наистина забавна страница, която използва наслояване за добавяне на дълбочина. За разлика от „правилния“ паралакс, фонът се движи по-бързо от предния план, създавайки дезориентиращо, отвъдно усещане.

10. Джес и Ръс

Превъртане с паралакс: екранна снимка показва илюстрация на жена в бяла рокля, носена от бърза над градски силует през нощта

Всяка илюстрация има усещане за дълбочина [Изображение: Jess & Russ]

Не е изненадващо, че двойката на дизайнерите Russ Maschmeyer и Jessica Hische уебсайт за сватба е красота за гледане. Сайтът описва тяхната романтична история, с превъртане с паралакс, използвано навсякъде, за да добави дълбочина към илюстрациите. Те се ожениха през 2012 г., но сайтът все пак си заслужава да бъде разгледан.

11. Направете парите си важни

Пример за паралакс превъртане на уебсайтове: Направете парите си важни

Управлявайте финансите си с информация и съвети от Make Your Money Matter [Image: Public Service Credit Union]

Финансите и парите едва ли са най-интересните теми. Но базираната в Ню Йорк дигитална агенция Първороден се добавя към този динамичен уеб сайт за превъртане на паралакс Направете парите си важни за Кредитния съюз на публичната служба.

най-добрият компютър лаптоп за редактиране на видео 2017

С цел да научи обществеността на предимствата от присъединяването към кредитен съюз, вместо да използва банка, този брилянтен сайт включва всичко - от това как работи кредитният съюз, до това къде да го намери и как да кандидатства, както и калкулатор, показващ само колко печелят банките от депозитите на клиента.

12. Мадуел

превъртане с паралакс: Мадуел

как да промените цвета на четката в
Нюйоркската агенция Madwell използва паралакс превъртане, за да добави усещане за дълбочина [Изображение: Madwell]

Агенция за дизайн и разработка Мадуел , базирана в Ню Йорк, показва своето портфолио с набор от паралакс скролиращи ефекти, за да създаде забележим 3D стил, който добавя огромна дълбочина.

13. Ню Йорк Таймс: Домат може блус

Примери за превъртане на уебсайтове с паралакс: New York Times

Прекрасно изживяване трябва да се получи с този паралакс, превъртащ статия на New York Times [Изображение:]

В днешната ера на ниско внимание и медии с големи размери, как привличате хората към журналистиката с дълги форми? Блуз от домати е чудесен отговор на този проблем от New York Times, комбинирайки някои умни техники за уеб дизайн с разказване на истории и илюстрации, вдъхновени от комикси, създадени от Atilla Futaki.

Един от най-добрите примери за превъртане с паралакс, който сме виждали, статията ви превежда през историята на боец ​​в клетка, написана от Мери Пилон. Докато превъртате съдържанието, илюстрациите оживяват с интелигентни анимации и промени, което ви позволява да се потопите напълно в съдържанието.

Илюстрациите на Футаки се основават на полицейски записи, разкази на свидетели, снимки и бележки на репортера, а вниманието към детайлите прозира. Като цяло това е страхотно четене - това ли е бъдещето на онлайн журналистиката?

14. Снежна есен

Пример за уеб сайтове за превъртане с паралакс: Snow Fall

Статията 'Snow Fall' на New York Times стартира изцяло нова лудост за богати сайтове за паралакс [Изображение: New York Times]

Един от първите сайтове, които наистина разшириха границите на това, което бихте могли да направите с редакционното съдържание на longform онлайн, New York Times Снежна есен статия съчетава набор от различни елементи, включително превъртане с паралакс и уеб видео.

Статията, посветена на ужаса от лавина в Tunnel Creek, е публикувана онлайн през декември 2012 г., но все още е силна като пример за това какво можете да направите с паралакс превъртане. Вестникът представи статията, спечелила Пулицър, по иновативен начин, който грабна вниманието на дизайнерската общност по целия свят.

Свързани статии: