36 Потрясающих примеров использования эффекта параллакс-скроллинга на лендингах

Posted on by riasevastopol

С широким распространением и возникновением HTML5 (представления стандарта и нового структурирования содержимого Глобальной паутины) и CSS3 (усовершенствованной версии языка описания внешнего вида объектов) произошло создавать более увлекательные и запоминающиеся элементы оформления всех, без исключения, интернет-страниц, включая, само собой разумеется, и лендинги.

Параллакс-скроллинг (с англ. parallax-scrolling — в веб-дизайне: особенная техника, применяемая прежде всего в компьютерной графике, в то время, когда фоновые изображения в возможности двигаются медленнее, чем двигаются элементы, расположенные на переднем замысле) — это одна из передовых разработок современного веб-дизайна. Но ее чрезмерное применение может ухудшить юзабилити сайта и привести к падению коэффициента конверсии.

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

1. Flat design vs Realism

На чьей стороне вы?

С подачи таких гигантов как Микрософт, Гугл и Apple, плоский дизайн (flat design) в мгновение ока стал предметом обсуждения и хитом сезона сотен новостных лент и блогов.36 Потрясающих примеров использования эффекта параллакс-скроллинга на лендингах Он воспринимался как некоторый прорыв в области веб-дизайна и, наверное, таковым и являлся в действительности.

Интерактивное агентство intact решило обратить внимание собственных клиентов на данный достаточно необыкновенный этап в развитии виртуального дизайна и подготовило интерактивное путешествие, снабдив его заголовком «Плоский дизайн против реализма». Все это создано, непременно, не без помощи новомодного результата.

Арт-директор агентства Алехандро Лазос (Alejandro Lazos) поясняет, что самым нетривиальным выяснилось объединить HTML5-параллакс и игру-скроллинг.

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

2. Сони

Для того чтобы вы еще нигде не видели!

Презентовать собственный товар так, как это делает корпорация Сони, не может, возможно, никто на свете. Представленный лендинг — это часть агиткампании Сони «Be Moved» (с англ. be moved — будь в движении), о которой они говорят следующее:

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

3. Costa Coffee

Агентство Graphite Digital остановило собственный выбор на иллюстрациях, самый ясно воображающих продукцию компании

Данный впечатляющий одностраничник — детище брайтонского агентства Graphite Digital. В недавнем прошлом перед агентством была поставлена задача: ярко и весьма интересно представить продукт компании Costa Coffee.

Итог работы заслуживает всяческих похвал. Лендинг выглядит роскошно. Он наполнен всяческими интерактивными элементами и анимированными иллюстрациями.

4. Highway One

Громадный вес изображений был основной проблемой для разработчиков

Данный потрясающий микросайт, созданный ньюкаслским агентством «Shout Digital» для турагентства «Exsus» (компания специализируется на организации и дорогом отдыхе медовых месяцев) — еще один превосходный пример разглядываемой нами темы. Их выполненная в ретростиле мультипликация мгновенно захватывает ваше внимание и уже не отпускает до финальных титров.

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

5. Make Your Money Matter

Руководите собственными финансами так, как это рекомендует сайт Make Your Money Matter

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

Задавшись целью повысить осведомленность целевой аудитории о преимуществах кредитного альянса (и недочётах банков), маркетологи создали потрясающий ленд, в дешёвой и увлекательной форме растолковывающий, как трудится кредитный альянс, где отыскать конторы организации и другое. Помимо этого, тут имеется калькулятор, что посчитает ту прибыль, которую банки приобретают от ваших вложений.

6. Cyclemon

Целевая страница продемонстрирует вам все существующие виды велосипедов

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

Разработчики, думается, не пропустили ни один вид велосипеда и попытались преподнести их так, дабы любой визитёр сильно захотел купить себе один и приобщиться к многомиллионной субкультуре.

7. Lexus

Вы имеете возможность опробовать автомобиль, оставаясь дома в собственном комфортном кресле

Именно поэтому сайту вы имеете возможность опробовать новую модель из линейки Lexus, не выходя из дома. Созданное консалтинговым digital-агентством Amaze интерактивное видео обеспечит вас полной и очень наглядной информацией по экстерьеру и интерьеру автомобиля Lexus IS. Эффект присутствия обеспечен.

Дабы достигнуть для того чтобы результата, команде маркетологов потребовалось запечатлеть автомобиль на фоне разнообразных пейзажей и отсканировать окружающий вид в каждой из главных точек. Благодаря технологии HTML5 лендинг функционирует и на персональных компьютерах, и на смартфонах, делая продвижение автомобиля очень успешным.

Венди Стоунфилд (Wendy Stonefield), коммерческий директор Amaze, отмечает: «Применение HTML5 разрешило нам достигнуть нескольких целей. Во-первых, это наглядная демонстрация автомобиля, его функциональных изюминок. Во-вторых, это интерактивность, без которой не обходится ни один современный проект: в этом случае мы разрешаем пользователям выбирать кузова автомобиля и цвет салона.

Создавая видео, мы ориентировались на искушенного зрителя — и с теми разработками, что существуют сейчас, это стало более чем вероятным. Мы продемонстрировали Lexus IS таким, какой он в действительности имеется».

8. Life in my Shoes

Life in my Shoes (с англ. — глазами другого человека) — это амбициозный проект, основной задачей которого есть предубеждённости и искоренение страха в отношении Больных СПИДом и увеличение осведомленности молодого поколения по вопросам ВИЧ и СПИД. У английского агентства Traffic было задание спроектировать лендинг, талантливый привлечь интерес юный аудитории и завоевать ее доверие, и они с ним великолепно совладали.

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

9. The Beast

Новая целевая страница известной фолк-певицы просматривает стихи и сопровождает их немыслимыми образами

Для продвижения нового альбома известной фолк-певицы Лауры Марлинг (Laura Marling) «A Creature I Don’t Know» (с англ. — Незнакомое мне создание) английское digital-агентство Studio Juice создало необычный лендинг пейдж, что просматривает стихи, сопровождая их изысканными иллюстрациями и ясными анимациями.

Дабы создать такое чудо, были использованы новые атрибуты и семантические элементы, благодаря которым анимации синхронизированы со звуковой дорожкой, а их скорость соответствует ранее заданным параметрам.

10. The Lab

Alzheimer s Research, ведущее учреждение в Англии, занимающееся изучением заболевания Альцгеймера, задалось целью поведать о собственной деятельности и ее итогах в увлекательной и дешёвой форме. Для этого и был создан ресурс The Lab.

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

11. Why Your Brain Craves Infographics

Инфографика об инфографике!

NeoMam Studios отметились превосходным паралакс-скроллинг лендингом, освещающим главные преимущества инфографики как способа подачи информации.

«Параллакс-скроллинг — это самое тяжёлое, что было нужно реализовывать отечественным разработчикам», — делится опытом Дэнни Эштон (Danny Ashton), директор компании. «Все дешёвые библиотеки они посчитали очевидными, исходя из этого вместо этого создали личные».

12. 5emegauche

Основной изюминкой этого ресурса есть то, что любая его страница наделена собственным механизмом скроллинга. Любая! Это весьма забавный и очень успешный подход, что к тому же обосновывает, что эта разработка разрешает изобретать очень способные формы представления информации.

13. Atlantis World s Fair

Необыкновенный скроллинг тут трудится не столько на зрелищность, сколько на сюжет

Эта онлайн-инфографика создана Френком Чимеро (Frank Chimero), что применял параллакс-скроллинг не только чтобы более выгодно представить данные, но и чтобы анимировать ее и вписать в рамки определенного сюжета. Верховный пилотаж!

14. Every last drop

Определи о мировой проблеме дефицита чистой воды!

Анимационная студия NiceSerious спроектировала данный лендинг, дабы обратить внимание общественности на проблему недостатка чистой воды на планете. Куда мы тратим воду? Где мы имели возможность бы ее сэкономить? Как это сделать?

Вы определите об данной проблеме все. Все до последней капли.

15. Living Word

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

16. Madwell

Параллакс-скроллинг додаёт толику глубины в лендинг агентства Madwell

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

17. The Jacksonville Downtown Art Walk

The Jacksonville Downtown Art Walk — это классический искусства и ежемесячный праздник культуры в городе Джексонвилль, штат Флорида. Фестиваль растягивается на 15 кварталов и складывается из дюжин галерей, музеев и баров. Все это сопровождают музыканты и уличные актёры.

Прекрасный сайт, говорящий об этом мероприятии, способен принести весёлое настроение и в ваш дом.

18. Von Dutch

Актуальный бренд Von Dutch со страниц собственного сайта говорит необычную историю судьбы собственного основателя. без сомнений, чтобы быть в тренде, и был использован новомодный вид скролла для сайта. В то время, когда вы прокручиваете страницу, картины и иконки плывут вверх и вниз, отчего создается чувство, что в ваш монитор, пока вас не было рядом, кто-то налил воды.

19. Fannabee

Fanabee — это лендинг, созданный кроме того не столько для тех, кто увлекается музыкой, столько для тех, кто ее коллекционирует. Посредством этого сервиса вы имеете возможность опубликовать перечень того, что вы собрали (компакт-диски, постеры, футболки и другое), и отыскать то, что вам не достаточно.

20. Peugeot Hybrid4

Новые разработки необходимо презентовать по-новому, не так ли?

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

21. Cultural Solutions

Cultural Solutions — это консалтинговое агентство, которое, как легко додуматься из заглавия, занимается ответом вопросов в области мастерства. Логотип компании — это многоцветные круги, наложенные друг друга. Как раз исходя из этого на основной странице сайта эти круги и обыгрываются посредством параллакс-эффекта. Кружки двигаются с различной скоростью, и это додаёт объёма и глубины.

Оказалось лаконичное, но очень емкое и стильное высказывание.

22. jQuery Conference

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

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

23. Shape

Креативное агентство Shape на своем лендинге в достаточно лаконичной форме говорит об главных этапах собственной деятельности. Приятные зрительные эффекты и анимации додают наглядности.

24. Nintendo

Дабы познакомить целевую общественность с новой серией игры Mario Kart, узнаваемая японская компания создала посадочную страницу, которая говорит об игре в формате маленького путешествия по ее миру. Дизайн лендинга и его цветовая гамма копирует стиль игры, а в пути вам встретятся привычные с детства персонажи.

25. Activate Drinks

Легко открутите крышку, и воздействие начнется

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

26. The Whitehouse s Iraq Timeline

Необыкновенный скроллинг применяют не только чтобы усилить эстетическую сторону кампании, но и, при с американским руководством, чтобы расставить смысловые и эмоциональные выговоры на странице. Вы имеете возможность подметить, что целый контент прокручивается значительно стремительнее, чем лежащие как бы снизу изображения. Это сделано намерено, дабы удержать внимание читателя именно на этих иллюстрациях, каковые оказывают действие на эмоции визитёров.

27. Pitchfork Cover Stories

Узнаваемый музыкальный сайт Pitchfork звучно заявил о себе, выступив с амбициозным проектом «Cover Stories». Интернет-ресурс купил кое-какие черты печатного глянцевого журнала, но использование результата параллакса для сайта, интерактивных видео, интервью и неповторимых фотографий сделали его непохожим ни на что. Анимированные портретные фото, одухотворенный текст и идеально подобранный саундтрек — весьма красноречиво и изысканно.

28. Soleil Noir 2012 | We believe in

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

Это причудливый лендинг, созданный французами из агентства Soleil Noir, по сути, есть новогодней открыткой. Тут вы не отыщете ничего сложного: не вызывающий головокружения параллакс-скроллинг, минимализм в иллюстрациях, лаконичные фразы — но это простота подкупает.

29. Oakley

Oakley объединяет потрясающий параллакс-выразительные фотографии и скроллинг

Oakley — это узнаваемый поставщик защитных очков и масок, и представленный ресурс создан специально для продвижения новой модели защитных очков Airbrake MX. Целевая страница объединила в себе потрясающий параллакс-скроллинг и ясные фото, каковые замечательно презентуют продукт.

30. Jason Kenny OBE

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

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

31. La Moulade

Навигационная панель разрешит вам скоро и легко переместить в нужную область страницы

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

32. Walking Dead

Самое тяжёлое — это объединить воедино успехи всех разработок

«Прежде всего, мы сами фанаты этого шоу», — делится впечатлениями от работы над проектом ведущий дизайнер Гейвин Бек (Gavin Beck). — В отечественных замыслах было создать сайт, соответствующий миру «Ходячих мертвецов», что поклонники сериала оценили бы и изучили. Дабы достигнуть собственных целей, мы применяли такие новые разработки, как HTML5, CSS3, JavaScript/jQuery, Web Audio/HTML5 Audio и, конечно же, параллакс-скроллинг. Самой тяжёлой задачей было вынудить все эти технологии трудиться совместно и быть дешёвыми для всех видов платформ».

33. New York Times: Tomato Can Blues

Возможно, это и имеется будущее онлайн-журналистики?

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

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

34. Health Service Payouts

Ничего сложного, казалось бы, но выглядит достаточно занимательно

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

Когда вы начнете прокручивать целевую страницу вниз, на экране покажется сотрудник медучреждения, идущий по коридору и толкающий перед собой каталку. Он движется от секции к секции, и любая из них воображает определенный год в истории Совокупности национального здравоохранения Англии. Всплывающие окна содержат данные о том, какие конкретно большие компенсационные выплаты были сделаны в эти годы.

Ничего сложного, казалось бы, но выглядит достаточно занимательно.

Сотрудник агентства, создавшего данный лендинг, делится впечатлением от работы: «Дабы создать данный сайт, мы применили новые разработки в HTML5, CSS3 и JavaScript. Так как анимации — это главный элемент, мы применяли, в основном, библиотеки анимации “skrollr”. Любой элемент мы прорисовывали вручную, а финальные штрихи добавили с помощью CSS3».

35. We are Unfold

Совершенная игра различных видов скроллинга

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

36. Savings Challenge

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

Плагин Stellar.js

Stellar.js — это плагин, благодаря которому возможно применить эффект параллакса к любому прокручиваемому объекту. Не смотря на то, что данный плагин больше не поддерживается, он употребляется многими разработчиками благодаря совместимости и своей стабильности с последними предположениями jQuery.

Еще одна его нужная изюминка — возможность работы без библиотеки jQuery. Исходя из этого лендинги, созданные на его базе, меньше весят и стремительнее загружаются.

Просматривайте кроме этого: Знакомство с Parallax Scrolling и его втором Stellar.js

Заключение

Мир не следует на месте, и ежедневно появляются новые произведения искусства в области веб-дизайна. Станете ли вы среди этих храбрецов? Легко, в случае если возьмете на вооружение эти красивые разработки.

Но помните о главном: любой внедренный эффект обязан содействовать увеличению конверсии! В противном случае он вам просто бесполезен.

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

//lpgenerator.ru/theme/preview/1813/

//lpgenerator.ru/theme/preview/1781/

//lpgenerator.ru/theme/preview/1759/

//lpgenerator.ru/theme/preview/1775/

Высоких вам конверсий!

По данным creativebloq.com

Случайные статьи:

Parallax (jQuery) — создание параллакс эффекта


Подборка похожих статей:

riasevastopol

More Posts