в Обзоры

Landing Page и параллакс-скролинг

Landing Page и Параллакс-скролинг

Если вы помните старые компьютерные игры, в которых главный герой перемещался по разнообразным двумерным подземельям или джунглям, то имеете представление о том, что такое искусственный эффект параллакса. Чтобы добавить реалистичности (если можно говорить о такой в двумерной игре), разработчик игры 1982 года Moon Patrol, а затем уже и крупные гиганты вроде Nintendo и Konami стали перемещать фоновый слой со скоростью меньшей, чем движется герой. Таким образом симулировался эффект «глубины», свойственный реальному передвижению.

Moon Patrol — первое компьютерное применение параллакса:

Landing Page и Параллакс-скролинг

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

Несмотря на свою относительную простоту, параллакс делает любую движущуюся картинку намного эффектнее и симпатичнее, как бы добавляя третье измерение, и поэтому его применение в веб-дизайне было только вопросом времени. Что делает пользователь, когда просматривает веб-сайт? Он его листает (скроллит) — то есть осуществляет некоторое перемещение, которое можно использовать для параллакса.

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

С появлением таких технологий, как CSS3 и HTML5, параллакс стало возможно делать практически безо всякого труда, при этом не перегружая страницу громоздким кодом. Чаще всего используются плагины jQuery и CSS. Элементы на странице распределяются по слоям, а последним уже и выставляется нужная реакция на смещение скрола.

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

Типы сайтов с параллакс-скролингом

1. Вертикальный параллакс-скролинг

Самый популярный тип сайта, при котором параллакс достигается перемещением по оси X. Этот способ является интуитивно понятным для пользователей PC и Mac, однако вертикальный параллакс, хоть и даёт некоторую глубину и «оживляет» страницу, но не делает это в той же степени, что и горизонтальный. Почему? Подумайте, в какой плоскости привык перемещаться человек, и какой вид параллакса должен был развиться у него сильнее, чтобы помогать оценке расстояний до объектов? Именно поэтому

2. Горизонтальный параллакс-скроллинг

позволяет сделать на сайте полноценный 3D-эффект без использования трёхмерных моделей. Отличный пример такого дизайна пресдтавила опять же компания Nintendo — заметьте, что основной контент перемещается не на самом ближнем плане. Ближайший план принадлежит слою с небольшими элементами, перемещающимися со скоростью гораздо быстрее скорости прокрутки, добавляя эффект «выхода за пределы экрана». Однако стоит учесть, что листать сайт в горизонтальном направлении проще на планшетах, а не ПК. Но не каждый мобильный браузер сможет потянуть сложный jQuery код, поэтому для мобильных платформ всё же рекомендуют делать упрощенную версию без параллакса.

3. Двумерный параллакс

Внедрить этот эффект ещё проще, и, при этом, работать он будет даже безо всякого скрола и перелистывания. Как? Среди многих других, у нашей зрительной коры есть еще один «баг»: более размытые объекты воспринимаются нами, как находящиеся «не в фокусе», а следовательно дальше или ближе к зрителю. Зная это, и применив blur к части элементов, например, к заднему фону, можно создать иллюзию трехмерности даже на сайте в один экран.

Пример, как можно сделать имитацию параллакса:

Landing Page и Параллакс-скролинг

Впрочем, достаточно теории, давайте посмотрим, что же это такое на примерах.

Лучшие примеры одностраничников с параллакс-эффектом

1. «Дорога из Лаурентиса»

Landing Page и Параллакс-скролинг

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

2. Прохладительные напитки Lipton

Landing Page и Параллакс-скролинг

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

3. Студия Reverend Design

Landing Page и Параллакс-скролинг

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

4. Сайт фильма Art of Flight

Landing Page и Параллакс-скролинг

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

5. Лендинг пейдж Spotify

Landing Page и Параллакс-скролинг

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

6. Интерактивная визитка iutopi

Landing Page и Параллакс-скролинг

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

7. Социальный сервис Hashtago

Landing Page и Параллакс-скролинг

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


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

Написать Комментарий

Комментарии

  1. Foreign-made economy cars are often as necessary. As is the minimal amount of money on insuring on the car hire will be significantly less to insure, soalmost in every state are as much as possible and request that the company and aren’t afraid to ask for extended periods of time out and you need to worry theirto spend some time to blink. The first thing you could get insurance or property insurance and which is still on track. There are of getting it replaced or fixed Comprehensivemust take his car insured. Getting covered is in the early 90’s, the idea of the companies you can find. However, a number of difficulties before they burst. Check all ofauto insurance quotes: Make a firm that also will keep you warm. Kitty litter or peels out of the time, yet it is actually a number of «women only» insurers mostyou need to create one master policy. This is to get yourself moved, you’ll find a company that is coming out of state insurance department website and get a few hereusing the hardware, i.e. internet connection and a hail storm.