—»     —»   Создание интерфейса веб-сайта в стиле параллакс-скроллинга на jQuery и CSS
  Раздел: Руководства   Комментариев: 5  

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

Интерфейсы веб-сайтов с параллакс-скроллингом все больше набирают популярность. Нам не хотелось бы упускать из виду данную тенденцию, поэтому сегодня мы предлагаем вам демо-проект с использованием эффекта параллакс, разработанный при помощи 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-техники.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 15725   |   Оставлено комментариев: 5
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 13 мая 2012 @ 12:45
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
классно, господа! давайте еще, особенно интересует анимация при параллакс эффекте, то есть вращение элементов при прокрутке, вывод из-за границ экрана элементов и т.д. Выложил на Г+!


--------------------
я дизайнер - http://imdesigner.ru
Комментарий #2: 13 мая 2012 @ 12:57
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
fortune, по параллаксу будет материал, уже есть в переводе. Так что ждите ... возможно даже в понедельник (завтра) будет опубликован на нашем сайте smile
Комментарий #3: 13 мая 2012 @ 14:36
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
Design FactoRy, ждемс! smile


--------------------
я дизайнер - http://imdesigner.ru
Комментарий #4: 14 июля 2012 @ 19:40
Написал: Кассий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Ребята, спасибо! Очень интересный и полезный материал, как для начинающего так и для опытного веб-разработчика!
Комментарий #5: 15 июля 2012 @ 13:19
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
Кассий, и вам спасибо! Заходите к нам почаще, будет еще много всего интересного.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
рунетки
Бесплатная русская рулетка
rt.fapcams.club
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Военный юрист консультация
в любых сложных ситуациях службы. Опытные юристы
konsultaciya-voennogo-yurista.ru
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031