36 приголомшливих прикладів використання ефекту паралакс-скролінгу на Лендінзі

плагін Stellar.js
Висновок

З виникненням і широким поширенням HTML5 (нового стандарту структурування та подання вмісту Всесвітньої павутини) і CSS3 (вдосконаленої версії мови опису зовнішнього вигляду об'єктів) стало можливим створювати більш цікаві і запам'ятовуються елементи оформлення всіх, без винятку, інтернет-сторінок, включаючи, звичайно, і Лендінзі.

Паралакс-скролінг (з англ. Parallax-scrolling - в веб-дизайні: особлива техніка, яка використовується в першу чергу в комп'ютерній графіці, коли фонові зображення в перспективі рухаються повільніше, ніж рухаються елементи, розташовані на передньому плані) - це одна з передових технологій сучасного веб-дизайну. Але її надмірне використання може погіршити юзабіліті сайту і привести до падіння коефіцієнта конверсії.

Сьогодні ми підготували для вас унікальну підбірку паралакс-сайтів і радимо познайомитися з прикладами найбільш вдалих цільових сторінок з використанням цього ефекту. Деяких з них схожі на витвори мистецтва, інші - дивують неординарним форматом, але всі вони гідні вашої уваги. Давайте розберемо паралакс і що це таке на прикладах.

На чиєму боці ви?

З подачі таких гігантів як Microsoft, Google і Apple, плоский дизайн (Flat design) в одну мить став хітом сезону і предметом обговорення сотень новинних стрічок і блогів. Він сприймався як якийсь прорив в області веб-дизайну і, найімовірніше, таким і був насправді. Інтерактивне агентство intact вирішило звернути увагу своїх клієнтів на цей досить незвичайний етап у розвитку віртуального дизайну і підготувало інтерактивне подорож, забезпечивши його заголовком «Плоский дизайн проти реалізму». Все це створено, безумовно, не без допомоги новомодного ефекту.

Креативний директор агентства Алехандро Лазос (Alejandro Lazos) пояснює, що самим нетривіальним виявилося об'єднати HTML5-гру і паралакс-скролінг.

«Ми хотіли, щоб все дійство відбувалося безперервно і користувачі могли рухатися від початку і до кінця без зупинок. Для цього ми використовували ajax-технологію, яка дозволила передавати дані через url і оновлювати дані у фоновому режимі, забезпечуючи користувача відповідної сторінкою без затримок ».

Такого ви ще ніде не бачили!

Презентувати свій товар так, як це робить корпорація Sony, не вміє, напевно, ніхто на світі. Представлений Лендінгем - це частина агітаційної кампанії Sony «Be Moved» (з англ. Be moved - будь в русі), про яку вони говорять наступне:

«Нас якось обізвали піддослідними кроликами, тому як все ті інновації, які ми впроваджуємо, тут же беруть на озброєнні конкуруючі компанії. Нас хотіли зачепити, але ми це сприйняли як комплімент. Спільна робота художників і інженерів - це завжди експеримент, але тільки в цьому випадку ви можете сподіватися, що завтра зробите крок вперед ».

Агентство Graphite Digital зупинило свій вибір на ілюстраціях, найбільш виразно представляють продукцію компанії

Цей вражаючий одностранічнік - дітище Брайтонському агентства Graphite Digital. У недавньому минулому перед агентством було поставлено завдання: яскраво і цікаво представити продукт компанії Costa Coffee.

Результат роботи заслуговує усіляких похвал. Лендінгем виглядає розкішно. Він наповнений всілякими інтерактивними елементами і анімованими ілюстраціями.

Велика вага зображень виявився головною проблемою для розробників

Цей приголомшливий мікросайту, розроблений Ньюкаслський агентством «Shout Digital» для туристичного агентства «Exsus» (компанія спеціалізується на дорогому відпочинку та організації медових місяців) - ще один чудовий приклад розглянутої нами теми. Їх виконана в стилі ретро мультиплікація миттєво захоплює вашу увагу і вже не відпускає до фінальних титрів.

За кермом класичного «Кадилак Ельдорадо» (Cadillac Eldorado) 1959 року випуску ви відвідаєте всі знамениті місця каліфорнійського узбережжя. На перший погляд, все ефекти здаються простими, але як тільки ви почнете скролінг, перед вами відкриється справжня магія.

Керуйте своїми фінансами так, як це радить сайт Make Your Money Matter

Тема грошей і особистих фінансів цікава багатьом, тому нью-йоркське digital-агентство «Firstborn» при підготовці замовлення для кредитної спілки воліла інноваційний формат традиційного.

Поставивши собі за мету підвищити обізнаність цільової аудиторії про переваги кредитної спілки (і недоліки банків), маркетологи створили приголомшливий ленд, в доступній і цікавій формі пояснює, як працює кредитна спілка, де знайти офіси організації та багато іншого. Крім того, тут є калькулятор, який вважатиме той прибуток, який банки отримують від ваших вкладень.

Цільова сторінка покаже вам всі існуючі види велосипедів

Китайські мудреці кажуть: «Ти те, що ти їси». Для дизайнерів і великих любителів байків Ромейна Боурдіукса (Romain Bourdieux) і Томаса Помареллі (Thomas Pomarelle) ця відома мудрість звучить так «Ти то, на чому ти їздиш». Їх створений у співавторстві сайт здивує вас не тільки новомодним скроллингом, але і прекрасним почуттям гумору і першокласними ілюстраціями.

Розробники, здається, не пропустили ні один вид велосипеда і постаралися піднести їх так, щоб кожен відвідувач загорівся бажанням придбати собі один і долучитися до багатомільйонної субкультурі.

Ви можете випробувати автомобіль, залишаючись вдома в своєму затишному кріслі

Завдяки цьому сайту ви можете випробувати нову модель з лінійки Lexus, не виходячи з дому. Розроблене консалтинговим digital-агентством Amaze інтерактивне відео забезпечить вас повною і досить наочною інформацією інтер'єру і екстер'єру автомобіля Lexus IS. Ефект присутності забезпечений.

Щоб досягти такого результату, команді маркетологів треба було зафіксувати автомобіль на тлі різноманітних пейзажів і відсканувати навколишній вид в кожній з ключових точок. Завдяки технології HTML5 Лендінгем функціонує і на комп'ютерах, і на смартфонах, роблячи просування автомобіля як ніколи успішним.

Венді Стоунфілд (Wendy Stonefield), комерційний директор Amaze, зазначає: «Використання HTML5 дозволило нам досягти кількох цілей. По-перше, це наочна демонстрація автомобіля, його функціональних особливостей. По-друге, це інтерактивність, без якої не обходиться жоден сучасний проект: в даному випадку ми дозволяємо користувачам вибирати колір салону і кузова автомобіля. Створюючи відео, ми орієнтувалися на досвідченого глядача - і з тими технологіями, що існують сьогодні, це стало більш ніж можливим. Ми показали Lexus IS таким, який він насправді є ».

Life in my Shoes (з англ. - очима іншої людини) - це амбітний проект, головним завданням якого є викорінення страху і упередженості по відношенню до ВІЛ-інфікованих і підвищення обізнаності молодого покоління з питань ВІЛ та СНІД. У лондонського агентства Traffic було завдання спроектувати Лендінгем, здатний привернути увагу молодої аудиторії і завоювати її довіру, і вони з ним чудово впоралися.

Фірмовий шрифт Houshka Rounded Medium був реалізований з підтримкою синтаксису font-face, чому сторінка стала виглядати жвавіше і цікавіше. Інші декоративні елементи поряд з використанням жовтого кольору зробили ресурс естетично привабливим.

Нова цільова сторінка відомої фолк-співачки читає вірші і супроводжує їх неймовірними образами

Для просування нового альбому відомої фолк-співачки Лаури Марлінг (Laura Marling) «A Creature I Do not Know» (з англ. - Незнайома мені створення) лондонське digital-агентство Studio Juice розробило дивовижний Лендінгем Пейдж, який читає вірші, супроводжуючи їх вишуканими ілюстраціями і виразними анімаціями.

Щоб створити таке диво, були використані нові семантичні елементи і атрибути, завдяки яким анімації синхронізовані зі звуковою доріжкою, а їх швидкість відповідає раніше заданим параметрам.

Alzheimer's Research, провідний заклад у Великобританії, що займається вивченням хвороби Альцгеймера, поставив собі за мету розповісти про свою діяльність та її результати в захоплюючій і доступній формі. Для цього і був створений ресурс The Lab.

На сторінці кожен користувач отримує можливість познайомитися з лабораторіями та клінікою установи, а спливаючі підказки в лаконічній формі пояснюють зображене на екрані. Якщо клікнути на будь-яку з них, ви отримаєте більш розгорнуту інформацію. Демонстрація того, як вчені втілюють свої теорії в життя і дають надію мільйонам людей, реалізована в найкращому вигляді.

Інфографіка про інфографіку!

NeoMam Studios відзначилися чудовим Паралакс-скролінг Лендінзі, які висвітлюють основні переваги інфографіки як методу подачі інформації.

«Паралакс-скролінг - це найважче, що довелося реалізовувати нашим розробникам», - ділиться досвідом Денні Ештон (Danny Ashton), директор компанії. «Всі доступні бібліотеки вони порахували банальними, тому замість цього створили власні».

Головною особливістю цього ресурсу є те, що кожна його сторінка наділена власним механізмом скролінгу. Кожна! Це дуже кумедний і вельми вдалий підхід, який до того ж доводить, що ця технологія дозволяє винаходити геніальні форми подання інформації.

Незвичайний скролінг тут працює не стільки на видовищність, скільки на сюжет

Ця онлайн-інфографіка розроблена Френком Чімера (Frank Chimero), який використовував паралакс-скролінг не тільки для того, щоб більш вигідно представити інформацію, але і для того, щоб анімувати її і вписати в рамки певного сюжету. Вищий пілотаж!

Дізнайся про глобальну проблему нестачі чистої води!

Анімаційна студія Nice & Serious спроектувала цей Лендінгем, щоб звернути увагу громадськості на проблему дефіциту чистої води на планеті. Куди ми витрачаємо воду? Де ми могли б її заощадити? Як це зробити? Ви дізнаєтеся про цю проблему все. Все до останньої краплі.

Перед digital-агентством Tribal була поставлена задача: оновити інтернет-представництво агентства перекладів Living Word і зробити його інформативним і цікавим. На результат ви можете помилуватися самі, але відразу скажемо, що британці не придумали нічого незвичайного, але зробили все акуратно і чисто.

Паралакс-скролінг додає дещицю глибини в Лендінгем агентства Madwell

Агентство з розвитку підприємництва Madwell, розташоване в Нью-Йорку, використовує посадкову сторінку для презентації власного портфоліо. Паралакс-скролинг є якоюсь родзинкою в організованому ними дійстві: вийшов 3D-ефект додає глибини в їх творіння.

The Jacksonville Downtown Art Walk - це традиційний щомісячний свято культури і мистецтва в місті Джексонвіль, штат Флорида. Фестиваль розтягується на 15 кварталів і складається з дюжин галерей, музеїв і барів. Все це супроводжують вуличні актори і музиканти. Гарний сайт, що розповідає про цей захід, здатний принести радісний настрій і в ваш будинок.

Модний бренд Von Dutch зі сторінок свого сайту розповідає дивовижну історію життя свого засновника. Безсумнівно, для того, щоб бути в тренді, і був використаний новомодний вид скролла для сайту. Коли ви прокручуєте сторінку, картинки та іконки пливуть вгору і вниз, від чого створюється відчуття, що в ваш монітор, поки вас не було поруч, хтось налив води.

Fanabee - це Лендінгем, створений навіть не стільки для тих, хто захоплюється музикою, стільки для тих, хто її колекціонує. За допомогою цього сервісу ви можете оприлюднити список того, що ви зібрали (компакт-диски, постери, футболки та інше), і знайти те, що вам не вистачає.

Нові технології потрібно презентувати по-новому, чи не так?

Онлайн-комікс, створений за замовленням автомобільного гіганта Peugeot (Пежо), дозволяє компанії виконати відразу два завдання: по-перше, він досить ефектно представляє увазі цільової аудиторії новий механізм Peugeot Hybrid4, а по-друге, працює на імідж як продукту, так і самої компанії: долучитися до Peugeot, сміливо експериментує з форматами і не забуває про свою індивідуальність, тепер стане ще престижніше.

Cultural Solutions - це консалтингове агентство, яке, як легко здогадатися з назви, займається вирішенням питань в галузі мистецтва. Логотип компанії - це різнокольорові кола, накладені один одного. Саме тому на головній сторінці сайту ці кола і обіграються за допомогою паралакс-ефекту. Гуртки рухаються з різною швидкістю, і це додає глибини та обсягу. Вийшло лаконічне, але дуже ємне і стильне висловлювання.

Розробники сайту jQuery Conference не забувають про головне: вони дотримуються вірного балансу між інформативністю і ефектністю

Сайт, створений спеціально для конференції jQuery, виконаний з вигадкою. Коли ви прокручуєте сторінку, скролінг паралакс jquery запускає ланцюжок різних анімацій: велосипед, який проїжджав зліва направо, або зграю чайок, які переслідують акулу. В цілому, оригінально і не перевантажено ефектами: адже головне не тільки здивувати, але і виявитися почутими.

Креативне агентство Shape на своєму Лендінзі в досить лаконічній формі розповідає про основні етапи своєї діяльності. Приємні візуальні ефекти і анімації додають наочності.

Щоб познайомити цільову громадськість з новою серією гри Mario Kart, відома японська компанія розробила посадкову сторінку, яка розповідає про гру в форматі невеликого подорожі по її світу. Дизайн Лендінзі і його колірна гамма копіює стиль гри, а в дорозі вам зустрінуться знайомі з дитинства персонажі.

Просто відкрутіть кришку, і діяти він почне

Компанія Activate Drinks займається поширенням вітамінізованих напоїв, і для просування своєї продукції вона розробила актуальний у всіх відносинах ресурс. Спочатку ви відкручує кришку пляшки (прокручуючи сторінку, зрозуміло), а потім потрапляєте в вихор стрімких бульбашок. Три рівня розміщення бульбашок створюють 3D-ефект і відчуття, що з монітора скоро полетять бризки.

Незвичайний скролінг використовують не тільки для того, щоб посилити естетичну сторону кампанії, але і, в випадку з урядом США, для того, щоб розставити смислові та емоційні акценти на сторінці. Ви можете помітити, що весь контент прокручується набагато швидше, ніж лежать як би знизу зображення. Це зроблено спеціально, щоб утримати увагу читача саме на цих ілюстраціях, які впливають на емоції відвідувачів.

Відомий музичний сайт Pitchfork голосно заявив про себе, виступивши з амбітним проектом «Cover Stories». Інтернет-ресурс придбав деякі риси друкованого глянцевого журналу, але застосування ефекту паралакса для сайту, інтерактивних відео, інтерв'ю та унікальних фотографій зробили його схожим ні на що. Анімовані портретні фото, одухотворений текст і ідеально підібраний саундтрек - дуже красномовно і вишукано.

Подкупающий мінімалізм від французів з Soleil Noir

Це химерний Лендінгем, розроблений французами з агентства Soleil Noir, по суті, є новорічною листівкою. Тут ви не знайдете нічого складного: що не викликає запаморочення паралакс-скролінг, мінімалізм в ілюстраціях, лаконічні фрази - але це простота підкуповує.

Oakley об'єднує приголомшливий паралакс-скролінг і виразні фотографії

Oakley - це відомий постачальник захисних окулярів і масок, і представлений ресурс розроблений спеціально для просування нової моделі захисних окулярів Airbrake MX. Цільова сторінка об'єднала в собі приголомшливий паралакс-скролінг і виразні фото, які прекрасно презентують продукт.

Лендінгем тричі олімпійського і двічі світового чемпіона в велосипедних гонках Джейсона Кенні (Jason Kenny)

Раніше в цьому році Брістольського маркетингове агентство Fiasco Design розробило цей чудовий landing page для тричі олімпійського і двічі світового чемпіона в велосипедних гонках Джейсона Кенні (Jason Kenny). Співзасновник агентства Бен Стірс (Ben Steers) заявляє: «Спираючись на технічне завдання, ми вирішили створити створити лише однієї сторінки сайт з вертикальним скролінгом і параллаксом».

Навігаційна панель дозволить вам швидко і легко перемістити в потрібну область сторінки

Серед зростаючого числа посадкових сторінок, що використовують положення смуги прокрутки для запуску анімацій і звукових ефектів, творіння французького агентства La Moulade виділяється досить незвичайним індикатором вашого становища на сторінці. Він розміщений зверху і надає вам також доступ до будь-якої частини сайту.

Найважче - це об'єднати воєдино досягнення всіх технологій

«У Першу Черга, ми Самі фанати цього шоу», - діліться враженнями від роботи над проектом провідний дизайнер Гейвін Бек (Gavin Beck). - У наших планах Було создать сайт, відповідній світу «Ходячих мерців», Який шанувальник серіалу оцінілі б і Вівче. Щоб досягті своих цілей, ми вікорістовувалі Такі Нові розробки, як HTML5, CSS3, JavaScript / jQuery, Web Audio / HTML5 Audio І, Звичайно ж, Паралакс-скролінг. Найважчим завданням було змусити всі ці технології працювати разом і бути доступними для всіх видів платформ ».

Бути може, це і є майбутнє онлайн-журналістики?

В епоху, коли люди не обтяжують себе читанням газет і журналів, багато журналістів задаються питанням, як же привернути увагу аудиторії до друкованого слова. Один з варіантів подолання кризи запропонувала американська газета The New York Times, яка розробила нову форму подання журнальних статей і оповідань - лише однієї сторінки сайт, створений із застосуванням новітніх розробок в області веб-дизайну і оформлений ілюстраціями за авторством Аттіли Футакі (Atilla Futaki).

Як тільки ви почнете скролл сторінку, ілюстрації прийдуть в рух і занурять вас в описуваний дійство.

Нічого складного, здавалося б, але виглядає досить цікаво

Незалежно від того, є закладами охорони здоров'я бюджетним або приватним, керівників цих організацій все більше хвилює зростаючий обсяг компенсаційних виплат. Представлена інфографіка розкриває саме цю проблему, але привертає до себе увагу параллаксом.

Як тільки ви почнете прокручувати цільову сторінку вниз, на екрані з'явиться співробітник медичного закладу, що йде по коридору і штовхає перед собою каталку. Він рухається від секції до секції, і кожна з них представляє певний рік в історії Системи національної охорони здоров'я Великобританії. Спливаючі вікна містять інформацію про те, які максимальні компенсаційні виплати були зроблені в ці роки. Нічого складного, здавалося б, але виглядає досить цікаво.

Співробітник агентства, який розробив цей Лендінгем, ділиться враженням від роботи: «Щоб створити цей сайт, ми застосували нові технології в HTML5, CSS3 і JavaScript. Так як анімації - це ключовий елемент, ми використовували, головним чином, бібліотеки анімації "skrollr". Кожен елемент ми промальовували вручну, а фінальні штрихи додали з підтримкою CSS3 ».

Ідеальна гра різних видів скролінгу

Цей ресурс створений норвезьким агентством Unfold і являє собою зразок комбінації таких ефектів, як нескінченний скролінг і паралакс-скролінг. Навігаційна панель, спрятавщаяся в правому верхньому куті, завжди дасть вам зрозуміти, в якому місці сайту ви перебуваєте, і дозволить швидко переміститися в цікаву для вас область, а якщо ви перейдіть сайт до кінця, то помітите, що повзунок смуги прокрутки автоматично переміститься вгору, а ви продовжите прокручувати сайт заново, з самого початку.

Навігаційна панель, спрятавщаяся в правому верхньому куті, завжди дасть вам зрозуміти, в якому місці сайту ви перебуваєте, і дозволить швидко переміститися в цікаву для вас область, а якщо ви перейдіть сайт до кінця, то помітите, що повзунок смуги прокрутки автоматично переміститься вгору, а ви продовжите прокручувати сайт заново, з самого початку

Для створення цього Лендінзі розробники використовували плагін skrollr.js, за рахунок якого відвідувачі отримали можливість «прокручувати» події на сторінці. Це дозволило добитися високої швидкості моделювання, що надає більше часу для згладжування переходів і побудови дієвого призначеного для користувача інтерфейсу. Для створення анімацій була використана технологія CSS 3D.

плагін Stellar.js

Stellar.js - це плагін, за допомогою якого можна застосувати ефект паралакса до будь-якого прокручують об'єкту. Хоча цей плагін більше не підтримується, він використовується багатьма розробниками завдяки своїй стабільності та сумісності з останніми версіями jQuery.

Ще одна його корисна особливість - можливість роботи без бібліотеки jQuery. Тому Лендінзі, створені на його основі, менше важать і швидше завантажуються.

Висновок

Світ не стоїть на місці, і кожен день з'являються нові твори мистецтва в області веб-дизайну. Чи будете ви серед цих героїв? Легко, якщо візьмете на озброєння ці прекрасні технології. Але не забувайте про головне: будь-який впроваджений ефект повинен сприяти підвищенню конверсії! Інакше він вам просто не потрібен.

Платформа LPgenerator, точніше кажучи, наш візуальний редактор, підтримує паралакс-ефекти; переконайтеся в цьому самі на прикладі шаблонів в магазині цільових сторінок LP Store :