Пользователь
0,0
рейтинг
16 апреля 2012 в 01:40

Разработка → Создаём parallax scrolling эффект с помощью jQuery и CSS перевод

В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.



Что такое «parallax» ?


Даже если вы не знакомы с термином «parallax scrolling», вы наверняка знакомы с техникой. Parallax scrolling — это процесс 2D анимации, который создаёт иллюзию глубины. Анимация передних слоёв быстрее, чем анимация фона. Когда вы наблюдаете за движущимся автомобилем, вам кажется, что объекты расположенные перед автомобилем, движутся быстрее, чем объекты расположенные за автомобилем. Parallax scrolling использует тот же принцип, чтобы заставить зрителя думать, что он наблюдает за 3D сценой.

Демонстрация и загрузка


На моей демонстрационной странице показан один из способов создания вертикального parallax scrolling эффекта.

Смотреть демо
Скачать исходник

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

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

Disclaimer 1: Так как это всё лишь эксперимент, я не проводил оптимицацию демо для работы на мобильных устройствах.

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

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


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

/* передний слой (воздушный шар/изображение пейзажа) */
#parallax-bg3 {
    z-index: 3;
    position: fixed;
    left: 50%; /* выравниваем левый край с центром окна */
    top: 0;
    width: 940px;
    margin-left: -470px; /* двигаем влево на полширины элемента */
}

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

#bg3-1 {
    position: absolute;
    top: -111px;
    left: 355px;
}
#bg3-2 {
    position: absolute;
    top: 812px;
    left: 321px;
}
/* и так далее… */

Всего несколько строк кода с использованием jQuery нужно для создания parallax scrolling эффекта. Я был удивлён, насколько это просто.

$(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');
}

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

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

Следующие шаги


Я уверен, что есть много других способов создания parallax scrolling эффекта, и надеюсь, мой опыт послужит отправной точкой для исследования этого метода.
Перевод: Jonathan Nicol
Александр @Palehin
карма
36,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (31)

  • +1
    Где то я уже это видел, нет? Или это та же статья наверх вылезла?
    • 0
      Ссылка на оригинал этой статьи есть в этой статье. Собственно, оттуда перешёл, прочитал, понравилась — перевёл)
    • +1
      Вы наверно спутали вот с этой статьей habrahabr.ru/post/141817/

      Мне тоже так сначала показалось, потому что в комментах к той статье кто-то ссылку на это же развитие автомпромышленности запостил
    • 0
      Неделю назад было подобное.
  • 0
    А картинки оптимизировать никак нельзя было? 1.6M это явное неуважение к пользователю.
    • +1
      Упрек не вам, разумеется.
    • 0
      Перезалил в jpg
      • 0
        Я не про ваши картинки, но тоже хорошо. :)
  • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      Это всего лишь один из способов сделать parallax scrolling. Никто не мешает увеличить скорость движения слоёв для создание наибольшей иллюзии. Также, не обязательно использовать всего четыре слоя, их может быть сколько угодно, тогда эффект будет гораздо заметнее. Плюс ко всему, тут всего несколько строк кода. И это всё работает без использования различных parallax scrolling библиотек, в которых, вовсе не 5 строк кода.
  • 0
    Чтобы эффект был заметнее, делают инерцию (ка в предыдущей статье). После конца прокрутки фон должен плавно останавливаться. Насколько сложно его сюда добавить?
    • +1
      Будьте добры, поделитесь ссылочкой на предыдущую статью
  • +6
    А мне как раз эффект понравился своей ненавязчивостью. В отличии от остальных демо, тут не всё дергается-разбегается-убегает-мечется во время скролинга, а плавно скролится и внезапно осознаешь иллюзию глубины.
  • –2
    угу, запостил статью про автопромышленность и эффектом доводишь до ума ассоциативный ряд «глубоко в жопе»…
  • 0
    Opera — небольшой баг. Если скроллить держась мышой за скроллбар, а не крутить колесом, то пока мы движем скроллбар — двигается только текст, как только движение останавливаем (кнопку не обязательно отпускать) — остальные слои догоняют текст.
    • 0
      Opera 11.62 — Всё отлично скроллится
      • 0
        странно, аналогичная версия: 11.62.
        Вы именно тащите мышкой скроллбар? Потому как другие способы скроллинга отрабатываются нормально.
        • 0
          Да, тащу мышкой. Если интересно, вот видео (83,7 мб). Снял только что. Только курсор там скрыт (Camtasia Studio скрывает курсор на видео), но он там есть :)
          • 0
            верю что есть, куда же без него.
            Позже попробую «на чистой» машине, может дело в конфигах. У меня опера обновляется уже не первый год, заново не ставил очень давно.
  • 0
    Эх, параллакс становится попсовым
  • –2
    Работает достаточно плавно даже на слабых машинах. Будет интересно, если вы расскажете по свой алгоритм.
  • 0
    Жутко лагает в safari на ios.
    Впрочем, оно и не удивительно.
  • +1
    когда в настройках скроллинга стоит перелистывание по странице, а не по строкам, весь эффект пропадает
  • 0
    Странный эффект: В IE9 в режиме эмуляции IE8 работает плавнее, чем в режиме стандартов. Даже сделал версию без jQuery, к сожалению, лаги в IE9 остались :(
  • 0
    Интересный эффект. Так можно вообще без jQuery обойтись, обрабатывая события и работаю с DOM-деревом. Зачем заставлять пользователя грузить лишние десятки килобайт ради пары строчек кода?
  • –1
    На данный момент мне понравилась 3-4 сайта с параллаксом (например, adidas кроссовки). А вот остальные никакого «ухты» не вызывают, поэтому не понимаю почему данному эффекту придают столько внимания…
  • 0
    Ну все, держись интернет, скоро тебя захлестнет волна бесполезных монстрозных паралаксовых сайтов.
    А пост хоть и хороший, но уж очень простой.
  • 0
    Одно плохо — к высоте экранов вся верстка привязана. Но тут, правда, ничего не сделаешь (к сожалению).
  • 0
    Оказывается анимация по разному смотрится, в Chrome оно при юзании колёсика для скролинга дергается, а в FireFox-e плавно двигается, я вот надумал может для это нужно использовать не .css а .animate, но там проблема в том что нужно каждый раз стопать анимацию при обращении от функции скролинга к анимации… Или динамически менять данные в функции анимации.

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