С возникновением и широким распространением HTML5 (нового стандарта структурирования и представления содержимого Всемирной паутины) и CSS3 (усовершенствованной версии языка описания внешнего вида объектов) стало возможным создавать более интересные и запоминающиеся элементы оформления всех, без исключения, интернет-страниц, включая, конечно, и лендинги.
На чьей стороне вы?
С подачи таких гигантов как Microsoft, Google и Apple, плоский дизайн (flat design) в мгновение ока стал хитом сезона и предметом обсуждения сотен новостных лент и блогов. Он воспринимался как некий прорыв в области веб-дизайна и, вероятнее всего, таковым и являлся на самом деле. Интерактивное агентство intact решило обратить внимание своих клиентов на этот довольно необычный этап в развитии виртуального дизайна и подготовило интерактивное путешествие, снабдив его заголовком «Плоский дизайн против реализма». Все это создано, безусловно, не без помощи эффекта параллакс-скроллинга.
Креативный директор агентства Алехандро Лазос (Alejandro Lazos) поясняет, что самым нетривиальным оказалось объединить HTML5-игру и параллакс-скроллинг.
«Мы хотели, чтобы все действие происходило непрерывно и пользователи могли двигаться от начала и до конца без остановок. Для этого мы использовали ajax-технологию, которая позволила передавать данные через url и обновлять данные в фоновом режиме, обеспечивая пользователя соответствующей страницей без задержек».
Параллакс-скроллинг от корпорации Sony: такого вы еще нигде не видели!
Презентовать свой товар так, как это делает корпорация Sony, не умеет, наверное, никто на свете. Представленный лендинг является частью агитационной кампании Sony «Be Moved» (с англ. be moved - будь в движении), о которой они говорят следующее:
«Нас как-то обозвали подопытными кроликами, потому как все те инновации, которые мы внедряем, тут же берут на вооружении конкурирующие компании. Нас хотели задеть, но мы это восприняли как комплимент. Совместная работа художников и инженеров - это всегда эксперимент, но только в этом случае вы можете надеется на то, что завтра сделаете шаг вперед».
Агентство Graphite Digital остановило свой выбор на иллюстрациях, наиболее выразительно представляющих продукцию компании
Этот впечатляющий одностраничник - детище брайтонского агентства Graphite Digital. В недавнем прошлом перед агентством была поставлена задача: ярко и интересно представить продукт компании Costa Coffee.
Результат работы заслуживает всяческих похвал. Лендинг выглядит роскошно и донельзя напичкан всяческими интерактивными элементами и анимированными иллюстрациями.
Большой вес изображений оказался самой большой проблемой для разработчиков
Этот потрясающий микросайт, разработанный ньюкаслским агентством «Shout Digital» для туристического агентства «Exsus» (компания специализируется на дорогом отдыхе и организации медовых месяцев) - еще один замечательный пример рассматриваемой нами темы. Их выполненное в ретростиле мультипликация мгновенно захватывает ваше внимание и уже не отпускает до финальных титров.
За рулем классического «Кадиллак Эльдорадо» 1959 года выпуска (Cadillac Eldorado), вы посетите все знаменитые места калифорнийского побережья. На первый взгляд, все эффекты кажутся простыми, но как только вы начнете скроллинг, перед вами откроется истинная магия.
Управляйте своими финансами так, как это советует сайт 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 Don’t 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, обладает небольшим параллакс-эффектом, но исполнен с выдумкой. Когда вы прокручиваете страницу, то запускаете цепочку различных анимаций: велосипед, проезжающий слева направо, или стаю чаек, преследующих акулу. В целом, оригинально и не перегружено эффектами: ведь главное не только удивить, но и оказаться услышанными.
Креативное агентство Shape на своем лендинге в достаточно лаконичной форме рассказывает об основных этапах своей деятельности. Анимации добавляют наглядности, и наряду с параллакс-скроллингом все это оказывает приятный визуальный эффект.
Для того, чтобы познакомить целевую общественность с новой серией игры Mario Kart, известная японская компания разработала посадочную страницу, которая, используя эффект параллакс-скроллинга, рассказывает об игре в формате небольшого путешествия по ее миру. Дизайн лендинга и его цветовая гамма копирует стиль игры, а на протяжении всего пути вам встретятся знакомые с детства персонажи.
Просто открутите крышку, и действие начнется
Компания Activate Drinks занимается распространением витаминизированных напитков, и для продвижения своей продукции она разработала актуальный во всех отношениях ресурс. Сначала вы откручиваете крышку бутылки (прокручивая страницу, разумеется), а затем попадаете в вихрь стремительных пузырьков. Три уровня размещения пузырьков вкупе с параллакс-эффектом создают 3D-эффект и ощущение, что из монитора скоро полетят брызги.
Параллакс-скроллинг используют не только для того, чтобы усилить эстетическую сторону кампании, но и, в случае с правительством США, для того, чтобы расставить смысловые и эмоциональные акценты на странице. Вы можете заметить, что весь контент прокручивается гораздо быстрее, чем лежащие как бы снизу изображения. Это сделано специально, чтобы удержать внимание читателя именно на этих иллюстрациях, которые оказывают воздействие на эмоции посетителей.
Известный музыкальный сайт Pitchfork громко заявил о себе, выступив с амбициозным проектом «Cover Stories». Интернет-ресурс приобрел некоторые черты печатного глянцевого журнала, но применение параллакс-эффекта, интерактивных видео, интервью и уникальных фотографий сделали его непохожим на что-либо. Анимированные портретные фотографии, одухотворенный текст и идеально подобранный саундтрек - очень красноречиво и изысканно.
Подкупающий минимализм от французов из Soleil Noir
Это причудливый лендинг, разработанный французами из агентства Soleil Noir, по сути, является ничем иным как новогодней открыткой. Здесь вы не найдете ничего сложного: не вызывающий головокружения параллакс-скроллинг, минимализм в иллюстрациях, лаконичные фразы - но это простота подкупает.
Oakley объединяет потрясающий параллакс-скроллинг и выразительные фотографии
Oakley - это известный поставщик защитных очков и масок, и представленный ресурс разработан специально для продвижения новой модели защитных очков Airbrake MX. Целевая страница объединила в себе потрясающий параллакс-скроллинг и выразительные фотографии, которые прекрасно презентуют продукт.
Лендинг трижды олимпийского и дважды мирового чемпиона в велосипедных гонках Джейсона Кенни (Jason Kenny)
Ранее в этом году бристольское маркетинговое агентство Fiasco Design разработало этот замечательный landong 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 была использована для создания анимаций.
Заключение
Мир не стоит на месте, и каждый день появляются новые произведения искусства в области веб-дизайна. Будете ли вы среди этих героев? Легко, если возьмете на вооружение эти прекрасные технологии. Но не забывайте о главном: любой внедренный эффект должен способствовать повышению конверсии! Иначе он вам просто не нужен.
| 29.09.2014
Добрый день, дорогие читатели! Наш сегодняшний рейтинг, состоящий из 10-ти мест, посвящен не обычным сайтам. Сайты в этом списке ТОП-10 имеют одну общую особенность – эффект параллакса.
Специально для тех, кто еще не в курсе, что это такое, мы вкратце расскажем об этом эффекте, который уже начал интенсивно набирать обороты и становится все более популярным в сфере веб-дизайна.
Итак, параллакс-эффектом, либо параллакс-скроллингом называется специальная техника, при которой объекты на заднем плане в перспективе движутся медленнее, чем объекты на переднем плане. За счет этого создается эффект 3D, появляется ощущение трехмерного пространства. Параллакс-скроллинг – отличный способ добавить изюминку в одностраничный сайт, оживить инфографику, поведать историю или продемонстрировать портфолио. А некоторые работы современных дизайнеров можно с полной уверенностью назвать произведениями искусства… Впрочем, лучше один раз увидеть, чем сто раз услышать – ознакомьтесь с нашим ТОП-10 сайтов и взгляните сами!
Обратите внимание: некоторые сайты с parallax scrolling бывают ресурсозатратны из-за множества эффектов, поэтому не исключается «подтормаживание» на определенных компьютерах и портативных устройствах.
Десятое место в нашем рейтинге занимает сайт Grab & Go, где параллакс-эффект используется в качестве украшения и оживления картинки. При движении курсора можно наблюдать, как одновременно перемещаются дома и деревья на заднем фоне. Согласитесь, за счет этой изюминки есть шанс, что сайт лучше запомнится посетителю.
На сайте DigitalHands, занимающем 9-е место, эффект параллакса также используется для того, чтобы красиво выделиться и запомниться посетителям. Двигайте курсором мыши и наслаждайтесь спецэффектом.
Нью-Йоркское креативное агентство Madwell демонстрирует свое портфолио на главной странице сайта, умело используя параллакс-эффект. Ощущение 3D не покидает пользователя на протяжении всего времени прокрутки.
Любой товар нуждается в правильном представлении. На сайте магазина Oakley параллакс-скроллинг используется для демонстрации преимуществ защитных очков Airbrake MX. Получилось довольно впечатляюще и познавательно, поскольку продукцию можно рассмотреть и изучить со всех сторон, просто пользуясь скроллом.
Мало кого из людей не волнует тема личных финансов. Сайт Make Your Money Matter, занявший 6-е место нашего рейтинга, в доступной форме раскрывает зрителям преимущества кредитного союза и рассказывает о минусах банков. Здесь можно воспользоваться калькулятором, который покажет, какую прибыль получают банки благодаря вложениям клиентов, а также найти отделения кредитных кооперативов по почтовому индексу.
Хотели бы вы изучить Сиэтл с высоты 184 метра? Сайт Space Needle отправит вас в виртуальную прогулку по самой узнаваемой достопримечательности города – башне Спейс-Нидл (Space Needle), что в переводе с английского означает «космическая игла». Эта башня высотой 184 м, шириной 42 м и весом 9 550 тонн выдерживает ураганы со скоростью ветра до 320 км/ч и землетрясения до 9,1 балла. К тому же, у башни есть 25 громоотводов. Отличительной особенностью Спейс-Нидл является обзорная площадка на высоте 159 метров, ресторан SkyCity и магазин подарков. С ее вершины можно увидеть центр Сиэтла, вулкан Рейнир, Каскадные горы, залив Элиот и окружающие острова.
Крупнейший французский автопроизводитель Peugeot довольно неординарным образом презентовал систему гибридного привода Hybrid4. Перед нашими глазами открывается захватывающий комикс (который, между прочим, можно поставить на автовоспроизведение), где задача главной героини – раздобыть секретные данные и уйти, не попав в неприятности. Для успешного выполнения операции она вынуждена переключаться между четырьмя различными режимами движения, которые имитируют технологию Peugeot Hybrid4 – максимальная производительность и динамичность (Sport), режим полного привода и максимальной тяги (4WD), баланс между производительностью и экономией (Auto), тихая работа (ZEV).
Итак, мы подошли к третьему месту в нашем списке ТОП-сайтов, которое досталось проекту The Walking Dead. При создании сайта, который в первую очередь заинтересовал многочисленных фанатов сериала «Ходячие мертвецы», использовались HTML5, CSS3, JavaScript и, конечно, параллакс-эффект. Разработчики проделали огромный труд, заставив работать все эти технологии вместе и на всех платформах. Попадая на сайт и начиная скроллить, пользователь видит рассказ-комикс о том, как из актеров делают зомби.
Уникальный и неповторимый проект, часть агитационной кампании Sony «Be Moved» впечатляет своей объемностью, динамикой и продуманностью до мельчайших деталей. Лучшей презентации продукции, чем у Sony, наверное, не сыскать. Слова излишни – просто скроллите вниз и наслаждайтесь!
И, наконец, мы дошли до первого места нашего рейтинга, которое занял сайт Flat vs. Realism – детище интерактивного агентства inTacto. Этот новогодний проект со зрелищной графикой (и музыкальным сопровождением!) представляет собой мини-игру жанра fighting с интересной предысторией, где происходит противостояние представителей двух видов дизайна – реалистичного и плоского. Сделав упор на главный холивар конца 2013 – начала 2014 года, создатели не прогадали: после выхода эта впечатляющая работа мгновенно вызвала фурор и стала популярным предметом обсуждения в блогах и новостях.
Разработчикам сайта удалось объединить параллакс-скроллинг и игру на HTML5. «Мы хотели сделать так, чтобы во время прокрутки сайта от начала до конца все действия происходили плавно и без задержек. Для этого мы применили AJAX, что позволило обновлять данные в фоновом режиме», – пояснил креативный директор агентства Alejandro Lazos. Проект был представлен зрителям в конце 2013, перед Новым годом. Приготовьтесь крутить скролл, вас ждет много увлекательного!
Каждый год мы наблюдаем появление и исчезновение разных тенденций в веб-дизайне. А иногда случается так, что определенная «фишка» спустя некоторое время начинает повсеместно использоваться снова.
В 2012 году многие зарубежные сайты использовали весьма интересный эффект, позаимствованный из игр – параллакс-скроллинг. Это вообще было время моды на 3D, вот и сайты пытались сделать трехмерными, многослойными.
Спустя год-второй о параллаксе как-то позабыли, и те сайты, которые были яркими примерами его применения, пережили редизайн, сделав выбор в пользу других визуальных приемов. Сегодня же этот эффект переживает возрождение, и о нем снова начали говорить.
Вспомним и мы, что это такое, где его применять и как, а также рассмотрим несколько ярких примеров использования параллакса.
Параллакс-скроллинг – что за зверь?
Параллакс-эффект на сайтах распознать очень просто – используется несколько фонов, которые, кажется, движутся с разными скоростями, чтобы создать ощущение глубины (создание искусственного 3D-эффекта). Этот прием вовсю применялся в играх «старого образца», также является интересной тенденцией в веб-дизайне.
Термин происходит от греческого «Parallaxis», что означает «изменение». Сегодня эта тенденция заново прокладывает себе путь в мире веб-дизайна.
Параллакс-скроллинг может быть как стандартным, вертикальным, так и горизонтальным, и с изменяющимся направлением.
Это очень интересный дизайнерский концепт, который выглядит просто потрясающе, но вместе с тем требует кропотливой работы. Нужно не только продумать реализацию, но и хорошо поработать над оптимизацией – иначе на мобильных устройствах или на больших экранах слои могут тормозить, и будут не то что украшать, а просто уродовать ваше творение.
Применяя параллакс, постарайтесь не сделать одну основную ошибку, которая часто встречается на такого рода сайтах – основному слою придают очень большую скорость движения, и в итоге пользователь не может нормально посмотреть информацию или фото. Чуть крутанул колесико – а фото или текст уже уехали далеко вниз, попытался вернуть – все спряталось вверх. Как , к примеру. На этапе оптимизации обратите внимание на скорость прокрутки слоев, основной должен, в идеале, двигаться с той же скоростью, что и скроллбар. А вот с остальными элементами, которые служат для украшения, можете смело играть.
Где применять?
Параллакс-скроллинг смотрится отлично на тех сайтах, где мало контента. Это идеальное решение для одностраничников, сайтов-визиток.
Допустим, у вас есть только краткая информация о компании, контакты и несколько фотографий. Простой сайт будет выглядеть с таким наполнением скучно и неинтересно. Но вот если добавить сюда необычные эффекты типа параллакса – этот ресурс запомнится пользователям надолго!
Привлечь внимание людей сейчас на самом деле очень сложно. Многие сайты пестреют и флеш-эффектами, и звуковыми наложениями, и другими необычными «фишками». Каждый старается выделиться, как только может – потому дизайнеры стали снова возвращаться к параллаксу.
Хорошо подойдет этот эффект также для одностраничников, которые представляют товар или линейку товаров. Продумав концепцию, можно сделать что-то действительно неповторимое.
Несколько примеров
А теперь перейдем от теории к практике, и рассмотрим несколько сайтов, которые применяют параллакс-скроллинг. Возможно, в этой подборке вы почерпнете вдохновение или найдете несколько оригинальных идей.
Перед вами – оригинальный каталог обуви, который, кроме параллакса, использует еще один Вместе эти приемы создают особую атмосферу.
Страница, как видите, движется с одной скоростью, а геометрические фигуры – с другой, немного медленнее.
Тут параллакс опять идет рука об руку со звуком, и помогает рассказать целую историю. Кроме 3D эффекта, мы видим тут и другие модные тенденции – черно-белые цвета оформления, рисунки от руки, рукописные шрифты. Если вам лень крутить колесико – включите автоскроллинг и наслаждайтесь.
Добро пожаловать в Милан! Окунитесь в мир итальянского искусства!
Тут мы видим еще одно необычное решение – для просмотра сайта нужно не крутить колесико, а протягивать наполнение кнопкой мышки. Причем страница может протягиваться как в стороны, так и вниз.
Можно также переходить по списку внизу, сайт сам покажет вам нужное место.
А вы бы смогли так оригинально представить запчасти и прочее железо? Это пример того, как параллакс может помочь сделать сайт о товаре запоминающимся и интересным, даже если товар весьма специфичен и предназначен для узкого круга людей.
А вот – интересный вариант сайта ресторана. Тут мало текстового контента, и дизайнер нашел гениальное решение – совместить его с яркими фотографиями, которые расположены на другом слое и движутся с иной скоростью. Довольно свежо и оригинально.
Тут мы видим замечательные 3D-эффекты, для создания которых использовано и видео на заднем плане, и фото разного размера, и даже размытие тех элементов, которые словно находятся прямо «перед носом» пользователя. И разная скорость движения слоев, конечно же.
Яркий пример нестандартного подхода к параллаксу. Движущийся сам по себе фон в сочетании с текстом, который прокручивается вниз; 3D-модели, создающиеся справа; меняющиеся цвета фона при прокрутке – все это делает сайт по-настоящему незабываемым.
С возникновением и широким распространением 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 Don"t 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 — это плагин, с помощью которого можно применить эффект параллакса к любому прокручиваемому объекту. Хотя этот плагин больше не поддерживается, он используется многими разработчиками благодаря своей стабильности и совместимости с последними версиями jQuery.
Еще одна его полезная особенность — возможность работы без библиотеки jQuery. Поэтому лендинги, созданные на его основе, меньше весят и быстрее загружаются.
Мир не стоит на месте, и каждый день появляются новые произведения искусства в области веб-дизайна. Будете ли вы среди этих героев? Легко, если возьмете на вооружение эти прекрасные технологии. Но не забывайте о главном: любой внедренный эффект должен способствовать повышению конверсии! Иначе он вам просто не нужен.
Платформа LPgenerator, точнее говоря, наш визуальный редактор, поддерживает параллакс-эффекты; убедитесь в этом сами на примере шаблонов в магазине целевых страниц LP Store
, Turtles in Time или оригинальную игру Moon Patrol . В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.
Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike - сайт о спортивных напитках Activate .
Наверное, вы заметили, что во время прокрутки страницы сайта вниз несколько различных элементов, находящихся на этой странице, двигаются с разной скоростью. Давайте для примера возьмем страницу, отображенную на картинке сверху. По мере прокрутки страницы вниз вы увидите, что голубые точки в фоне (те, которые немного размыты), двигаются с той же скоростью, что и скроллбар. Также, вы увидите, что группа голубых точек, которые более сфокусированы и лежат на переднем плане, двигаются с немного большей скоростью, чем скроллбар. Быстрее этих точек двигается текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products”. И, наконец, есть изображения самого продукта, как маленькие и расфокусированные в фоне, так и большие, сфокусированные и лежащие на переднем плане. Фоновые изображения продуктов двигаются с той же скоростью, что и текст, в то время как изображения продуктов на переднем плане двигаются быстрее этого текста. Это все и является идеальной демонстрацией параллакс-скроллинга, когда разные слои изображений накладываются друг на друга и все движутся с разной скоростью при прокрутке страницы, создавая эффект трехмерности.
Параллакс-скроллинг не ограничивается только вертикальным скроллом страницы или скроллингом по прямой линии. Отдадим право Nintendo для демонстрации идеального примера, подтверждающего это утверждение. Вспомните ранние игры Nintendo, где наши герои обычно двигались горизонтально слева направо вдоль экрана, а не вертикально вниз, как мы видели это на сайте Activate выше. Прокатитесь на MarkioKart Wii и давайте поговорим о некоторых клевых штуках, которые мы там можно увидеть.
Первую вещь, которую вы заметите, это направление скроллинга страницы - оно не вертикальное, а как сказано выше, а изначально горизонтальное. Конечно, это круто, но это также не новый концепт. Также, вы заметите параллакс-эффект с динозавром Йоши и панцирями на фоне, Марио и Луиджи на переднем плане и основным контентом, которые смещаются с разной скоростью при прокрутке. Но как только вы доедете до страниц #highlights и #attack, траектория смещения перестанет быть идеально горизонтальной. То же самое касается перехода между страницами #rediscover и #snes. Изображения не только сохраняют свою разную скорость смещения, но и меняют общее направление с горизонтального на вертикальное.
Стоит также отметить, что использование эффекта параллакса на вашем сайте не должно быть ограничено лишь возможностью создания искусственного 3D-эффекта. Сайт немецкой студии веб-дизайна Webseitenfactory является примером того, как можно использовать параллакс для добавления различных эффектов на страницу сайта, например движение иконок по разным траекториям, их увеличение и уменьшение по мере скроллинга сайта.
Параллакс-скроллинг также может помочь оживить сайт, на котором не особо много контента. Что если весь ваш сайт состоит из mission statement, или раздела about us, плюс контактная информация? Скорее всего, вы бы могли сделать это одной страницей и при определенных условиях у вас бы получился неплохой одностраничный сайт, но запомнится ли он посетителям? Скорее всего, нет. Но что если добавить к нему немного параллакса, как это сделал народ на Spring / Summer ?
Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.
Параллакс-скроллинг - это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.
