Главная > Руководства > Создание интерфейса веб-сайта в стиле параллакс-скроллинга на jQuery и CSS

Создание интерфейса веб-сайта в стиле параллакс-скроллинга на jQuery и CSS


13 мая 2012, 11:50. Разместил: Design FactoRy
Интерфейсы веб-сайтов с параллакс-скроллингом все больше набирают популярность. Нам не хотелось бы упускать из виду данную тенденцию, поэтому сегодня мы предлагаем вам демо-проект с использованием эффекта параллакс, разработанный при помощи jQuery и CSS.

Создание интерфейса веб-сайта в стиле параллакс-скроллинга на jQuery и CSS

Что это такое?

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

Демо и ссылки на скачивание

Наша демо-страница продемонстрирует вам один из подходов к реализации интерфейса с вертикальным parallax-скроллингом:

* Посмотреть демо
* Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.


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

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

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

Дисклеймер 2: навигационное меню в нашем демо было разработано под вдохновением от навигации на сайте Nike Better World. Если вы собираетесь разрабатывать точно такое же меню на коммерческом сайте, старайтесь сделать его более уникальным.

Как это работает

Слои со статьями и фоном позиционированы абсолютно посредством CSS, а также им задан параметр z-index таким образом, чтобы расположить их под слоями с элементами переднего плана. Всего 4 слоя: небольшие облака, большие облака, изображение шариков/пейзажа, статьи.

/* foreground (ballons/landscape) */
#parallax-bg3 {
z-index: 3;
position: fixed;
left: 50%; /* align left edge with center of viewport */
top: 0;
width: 940px;
margin-left: -470px; /* move left by half element's width */
}

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

#bg3-1 {
position: absolute;
top: -111px;
left: 355px;
}
#bg3-2 {
position: absolute;
top: 812px;
left: 321px;
}
/* etc... */

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

$(window).bind('scroll',function(e){
parallaxScroll();
});

function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
$('#parallax-bg3').css('top',(0-(scrolled*.75))+'px');
}

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

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

Следующий этап

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