Тренды

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

Автор Freelance.Today

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

В 2012 году многие зарубежные сайты использовали весьма интересный эффект, позаимствованный из игр – параллакс-скроллинг. Это вообще было время моды на 3D, вот и сайты пытались сделать трехмерными, многослойными.

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

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

Параллакс-скроллинг – что за зверь?

Параллакс-эффект на сайтах распознать очень просто – используется несколько фонов, которые, кажется, движутся с разными скоростями, чтобы создать ощущение глубины (создание искусственного 3D-эффекта). Этот прием вовсю применялся в играх «старого образца», также является интересной тенденцией в веб-дизайне.

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

Параллакс-скроллинг может быть как стандартным, вертикальным, так и горизонтальным, и с изменяющимся направлением.

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

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

Где применять?

Параллакс-скроллинг смотрится отлично на тех сайтах, где мало контента. Это идеальное решение для одностраничников, сайтов-визиток.

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

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

Хорошо подойдет этот эффект также для одностраничников, которые представляют товар или линейку товаров. Продумав концепцию, можно сделать что-то действительно неповторимое.

Несколько примеров

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

Melanie F. 

Тренды для фрилансеров

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

Страница, как видите, движется с одной скоростью, а геометрические фигуры – с другой, немного медленнее.

The Boat 

Тренды веб-дизайна

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

Giampiero Bodino 

О трендах веб-дизайна для фрилансеров

Добро пожаловать в Милан! Окунитесь в мир итальянского искусства!

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

Можно также переходить по списку внизу, сайт сам покажет вам нужное место.

Mas Industries 

Тенденции веб-дизайна фриланс

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

L'Amor Fou 

Примеры красивых сайтов

А вот – интересный вариант сайта ресторана. Тут мало текстового контента, и дизайнер нашел гениальное решение – совместить его с яркими фотографиями, которые расположены на другом слое и движутся с иной скоростью. Довольно свежо и оригинально.

Lois Jeans SS 15 

Мода в дизайне

Тут мы видим замечательные 3D-эффекты, для создания которых использовано и видео на заднем плане, и фото разного размера, и даже размытие тех элементов, которые словно находятся прямо «перед носом» пользователя. И разная скорость движения слоев, конечно же.

Feed Music 

Фриланс тренды

Яркий пример нестандартного подхода к параллаксу. Движущийся сам по себе фон в сочетании с текстом, который прокручивается вниз; 3D-модели, создающиеся справа; меняющиеся цвета фона при прокрутке – все это делает сайт по-настоящему незабываемым.

Giaco Morelli 

Тенденции в сайтостроительстве

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

Your Time 4 

Современные сайты

Веселенький и очень оригинальный сайт. Рисованные персонажи+параллакс=незабываемая атмосфера!

Marcin Dmoch 

Тренды для фрилансеров

И, в самом конце подборки – пример сайта-портфолио и применением параллакс-скроллинга. Все очень скромно, но выглядит интересно.

Инструменты для создания параллакс-эффекта

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

Первый – это плагин для создания необычных эффектов прокрутки Scrollorama.

Еще несколько плагинов:

jQuery-Parallax-Slider 

jParallax 

jQuery Scroll Path 

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

Надеемся, вы не зря потратили время на прочтение этого материала.

  • 9897