14 зашеметяващи уеб страници с паралакс превъртане
Превъртането Parallax съществува от известно време, но това е една от тенденциите в уеб дизайна, която просто продължава. Паралаксното превъртане е, когато оформлението на уебсайта вижда фона на уеб страницата да се движи с по-ниска скорост на преден план, създавайки 3D ефект, докато превъртате. Използва се пестеливо, той може да осигури приятен, фин елемент на дълбочина, който води до отличителен и запомнящ се уебсайт.
За да покажем как трябва да се направи, ето няколко сайта, които използват техниката с брилянтен ефект. В някои случаи превъртането с паралакс е звездата на шоуто; в други това просто добавя докосване на дълбочина, което кара предния план да изглежда малко изскачащ.
Ако наистина искате да изтласкате лодката, това е впечатляващо CSS анимация примери показват още един чудесен начин да накарате уебсайта Ви да се откроява от тълпата. Можете също така да проверите най-доброто от нас инструменти за уеб дизайн това ще ви помогне в начинанията по проектиране. Засега обаче нека да разгледаме някои сайтове, използващи паралакс превъртане по много правилния начин.
01. История на изкуството на уеб дизайна
Историята на изкуството и уеб дизайна не са теми, които непременно бихте събрали, но те са прекрасно обединени в това история на изкуството на уеб дизайн сайт, който проследява бъдещето на уеб дизайна, като разглежда изкуството през времето.
Тук се играят редица техники за превъртане с паралакс, което означава, че потребителите са постоянно изненадани и доволни, докато превъртат надолу по страницата. Това си заслужава да отделите малко време за проучване.
02. Интерактивният каталог на Qode
The Интерактивен каталог на Qode има стилизирана долна навигационна система за текст, за да разкрие изображение за всеки елемент. Кликването върху каталога след това вижда хоризонтално скролиране с паралакс, използвано за показване на набор от теми на WordPress. Това не е най-новаторското използване на превъртане с паралакс в този списък, но то служи добре на целта си. Разпръскването на анимация също се използва с добър ефект.
03. Канали
Проектиран от Marcus Brown и разработен от Aristide Benoist, Канали ще ви отведе на 400-годишно пътешествие през историята на каналите от Амстердам от 17 век. Сайтът е проектиран да осигури преживяване в редакционен стил, като например разглеждане на пищния том на масичката за кафе, и използва чудесно паралакса, за да привлече вниманието ви към нови раздели от неговата история и да даде на сайта фин ефект на дълбочина.
04. Историята на The Goonies
Всеки на определена възраст е гарантиран за любовта от 80-те години на тийнейджърското приключение, The Goonies, и ако това сте вие, този сайт със сигурност ще накара носталгичните ви жлези да пулсират. Създадено от Джоузеф Бери с помощта на WebFlow, Историята на Goonies е почит към ретро класика, която използва превъртане с паралакс, за да ви привлече в историята, да ви запознае с героите и да разкрие режима за филма.
05. Догстудио
Непосредственото фокусно привличане на Догстудио Сайтът е красиво анимирано 3D куче - или е вълк? - в центъра на страницата, която се мащабира и завърта, докато превъртате надолу по страницата на паралакса. Осветлението му променя цвета, докато задържите курсора на мишката върху заглавията на последните проекти на Dogstudio и може би любимият ни бит е, когато се върти пред част от копието на страницата, закривайки част от текста.
06. ToyFight
ToyFight е награждавана творческа агенция и нейният уебсайт е много забавен. Основателите Джони Ландър и Лий Уипдей се превърнаха в триизмерни фигури, които се появяват в редица сцени в целия сайт (включително тази нахална справка за Sagmeister & Walsh). Умното използване на паралакс усилва 3D ефекта и съчетано със смели, ярки, обикновени фонове, никога не става непреодолимо или дразнещо.
07. Дизел: BAD Guide
84. Париж създаде този впечатляващ уебсайт за паралакс (и свързаната с него кампания в социалните медии), за да придружи пускането на BAD аромата на Diesel. Сайтът от една страница представя поредицата от правила, които съставляват „ЛОШОТО ръководство“.
Потребителят може да изследва, като плъзга мишката около паралаксната страница, която е разположена като щифт от изображения, върху които да щракнете. Има съвети за всичко от Tinder („Плъзнете надясно, надясно, надясно, надясно - ще ги подредите по-късно“) до Instagram („Не забравяйте да се свържете с бивш в четвъртък #TBT“), придружен от монохромни илюстрации.
08. Firewatch
Един от най-красивите примери за превъртане с паралакс, който сме виждали, е този уебсайт за играта Firewatch , който използва шест подвижни слоя, за да създаде усещане за дълбочина. Страхотно е, защото няма отвличане на превъртане (нещо, което често придружава ефекта на паралакса) и се използва само в горната част на страницата - останалата част от сайта все още е, за да можете да четете информацията, без да се разболявате от море. Ако искате да видите как се прави, ето една хубава демонстрация CodePen .
09. GitHub 404
404 страница на GitHub не е строго паралаксно превъртане, тъй като ефектът се случва върху размахване на мишката, за разлика от превъртането, но това е наистина забавна страница, която използва наслояване за добавяне на дълбочина. За разлика от „правилния“ паралакс, фонът се движи по-бързо от предния план, създавайки дезориентиращо, отвъдно усещане.
10. Джес и Ръс
Не е изненадващо, че двойката на дизайнерите Russ Maschmeyer и Jessica Hische уебсайт за сватба е красота за гледане. Сайтът описва тяхната романтична история, с превъртане с паралакс, използвано навсякъде, за да добави дълбочина към илюстрациите. Те се ожениха през 2012 г., но сайтът все пак си заслужава да бъде разгледан.
11. Направете парите си важни
Финансите и парите едва ли са най-интересните теми. Но базираната в Ню Йорк дигитална агенция Първороден се добавя към този динамичен уеб сайт за превъртане на паралакс Направете парите си важни за Кредитния съюз на публичната служба.
С цел да научи обществеността на предимствата от присъединяването към кредитен съюз, вместо да използва банка, този брилянтен сайт включва всичко - от това как работи кредитният съюз, до това къде да го намери и как да кандидатства, както и калкулатор, показващ само колко печелят банките от депозитите на клиента.
12. Мадуел
Агенция за дизайн и разработка Мадуел , базирана в Ню Йорк, показва своето портфолио с набор от паралакс скролиращи ефекти, за да създаде забележим 3D стил, който добавя огромна дълбочина.
13. Ню Йорк Таймс: Домат може блус
В днешната ера на ниско внимание и медии с големи размери, как привличате хората към журналистиката с дълги форми? Блуз от домати е чудесен отговор на този проблем от New York Times, комбинирайки някои умни техники за уеб дизайн с разказване на истории и илюстрации, вдъхновени от комикси, създадени от Atilla Futaki.
Един от най-добрите примери за превъртане с паралакс, който сме виждали, статията ви превежда през историята на боец в клетка, написана от Мери Пилон. Докато превъртате съдържанието, илюстрациите оживяват с интелигентни анимации и промени, което ви позволява да се потопите напълно в съдържанието.
Илюстрациите на Футаки се основават на полицейски записи, разкази на свидетели, снимки и бележки на репортера, а вниманието към детайлите прозира. Като цяло това е страхотно четене - това ли е бъдещето на онлайн журналистиката?
14. Снежна есен
Един от първите сайтове, които наистина разшириха границите на това, което бихте могли да направите с редакционното съдържание на longform онлайн, New York Times Снежна есен статия съчетава набор от различни елементи, включително превъртане с паралакс и уеб видео.
Статията, посветена на ужаса от лавина в Tunnel Creek, е публикувана онлайн през декември 2012 г., но все още е силна като пример за това какво можете да направите с паралакс превъртане. Вестникът представи статията, спечелила Пулицър, по иновативен начин, който грабна вниманието на дизайнерската общност по целия свят.
Свързани статии:
