Простая техника Parallax Scrolling

  • Tutorial
Доброго времени суток уважаемые хабраюзеры. На сегодняшний день Parallax Scrolling является неким трендом и я хочу рассказать о простой реализации данного эффекта. Техника основана на скорости изменения свойства background-position. Эффект Parallax Scrolling заключается в том, что фон движется медленнее чем содержимое

HTML разметка


Создаем два блока с атрибутами "data-type" и "data-speed":
<section id="home" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>

Для управления значениями скорости и позиции в JavaScript, data-type используются как ключевые атрибуты при передачи необходимых параметров.


CSS разметка


Добавляем фоновые изображения для элементов с id #home и #about
#home {
background: url(home-bg.jpg) center 0 repeat fixed; min-height: 1200px;
}
#about {
background: url(about-bg.jpg) center 0 no-repeat min-height: 1200px;
}

home-bg.jpg
30efa81c4067e1a308e5bd8b431

about-bg.jpg
Netcribe

Стилизуем сами элементы и их содержимое:
#home {
  background: url(home.jpg) center 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
}
#home article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 300px;
  width: 100%;
}
#about {
  background: url(about.jpg) center 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 300px;
  width: 100%;
}


JavaScript - jQuery


Перебираем все элементы с атрибутом data-type="background":
$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
      var $bgobj = $(this); // создаем объект
    });
});

Добавляем функцию .scroll() внутри .each(), которая вызывается при скроллинге:
$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
      var $bgobj = $(this); // создаем объект
      $(window).scroll(function() {
      ...   
      });
    });
});

Вычисляем коэффициент изменения позиции фона при скроллинге:
var yPos = -($(window).scrollTop() / $bgobj.data('speed'));

Netcribe

Записываем значение background-position в переменную и присваиваем стили coords:
var coords = 'center '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });


Финальный код:
$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // создаем объект
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); // вычисляем коэффициент 
            // Присваиваем значение background-position
            var coords = 'center '+ yPos + 'px';
            // Создаем эффект Parallax Scrolling
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

Демо

Спасибо всем за внимание.
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 39
  • +6
    уважаемые веб-разработчики, воздержитесь, пожалуйста, от повсеместного применения этого эффекта. мне от него крышу сносит. спасибо.
    • +9
      Уважаемые веб-разработчики, не воздерживайтесь, пожалуйста, от повсеместного применения этого эффекта. Мне от него крышу не сносит.
      • 0
        Когда скорость скролинга высокая, то у и меня рябит.
        А вот если скорость низкая, то весьма миленько.
        • 0
          Колёсиком когда скролю, то рывками. А когда скроллбар таскаю мышой — то норм, симпатишно так.
      • 0
        Я уже всерьез подумываю о написании плагина, который будет откатывать javascript до версии 1.7.
      • +1
        > $(document).ready(function(){
        Почему я так часто вижу это в чужом коде? Почему не $(function(){ ?!
        • +4
          Уже привычка. $(document).ready() — так в документации jQuery всегда было написано
          • +1
            Так чуть понятнее, что у document случилось ready.
            А то если не знать такой фичи, то не каждый поймет что это за функция, и куда она засунута.
            Почти самодокументирование.
            • 0
              Вы серьезно? давайте тогда писать <script type="text/javascript"></script> в HTML5
              • 0
                Если этого не знать.
                То и понимать не нужно.
                Нужно закрыть IDE и ити копать траншеи
                • 0
                  s/IDE/notepad.exe/
                  • 0
                    То есть вы считаете что хаки и шорткаты, лучше очевидного для любого человека кода?

                    Или считаете что сэкономив 16 байт кода вы облегчите страдания JavaScript интерпретатора? ))
                    • 0
                      Зачем тогда использовать библиотеки? давайте писать на чистом JS, зачем сокращения?
                • 0
                  Почему не $(function(){ ?

                  я бы сказал даже jQuery(function($){
                • НЛО прилетело и опубликовало эту надпись здесь
                  • 0
                    Это вам спасибо за ссылочку, Parallax тут шедевральный, сайт — супер, мне самому стало интересно, как сделать подобный эффект. Будет время, постараюсь разобраться, пойму — обязательно поделюсь этим с хабром.
                    • 0
                      joelb.me/scrollpath/ Наверное, как-то примерное так.
                      • 0
                        Полезно, добавил в закладки
                        • 0
                          За распространение таких ссылок я бы приговаривал к 15 суткам программирования на КОБОЛе.
                      • 0
                        Наркоманство.
                        • 0
                          Вот ещё отлично: http://www.nike.com/jumpman23/aj2012/
                        • 0
                          Да красивый эффект, мы на рекламной странице тоже решили простебаться параллаксом
                          • 0
                            На тормозной видухе — тихий ужас. Особенно депрессивный спецефект при притормаживающем скроллинге создаёт полосатый фон
                            • 0
                              Полосатый фон — это да, мечта эпилептика. Никак не соберемся от него отказаться.
                              • +1
                                проблему нашли, взяли и отказались.
                            • 0
                              Веселенькая у вас рекламная страница.
                            • 0
                              Все хорошо, но представим, что страница большая, и блоков с параллаксом много, даже на мощных компьютерах все будет тормозить. Как вариант, двигать только то, что попало в видимую часть, или попадет в неё через Npx.
                              • 0
                                Да, не спорю. Но это именно техника, очень простая для понимания. Даже на начальном уровне знания jQuery опираясь на эту технику можно придумать что нибудь поинтереснее.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                • 0
                                  Такой эффект на промо-сайтах, целевых страницах уже будет нести практическую пользу, если говорить о маркетинге. А в плане рабочих сайтов и их интерфейсов — это на самом деле вопрос на миллион =) Поскольку Parallax это тренд, я думаю где нибудь появится интересная реализация интерфейса с помощью этого.
                                • 0
                                  Статья полезная. Спасибо!
                                  • 0
                                    И сразу вопрос: зачем тут jQuery?
                                    • 0
                                      Чтобы сделать еще один запрос :) шутка.
                                      Думаю что на сайте это не единственный скрипт будет, так что скорее всего это отдельная часть сценария
                                      • 0
                                        Меня просто смутило то, что с условием использовании jQuery, демо не работает даже в IE8. Я переделывал сложное паралакс демо из статьи, без jQuery, кода не больше чем в оригинале на jQuery (и мой код проще), работает в IE7+
                                        • 0
                                          Нерабочее решение это уже скорее к автору этого решения. А jQuery в проекте скорее всего все равно будет задействовано, так что соблазн воспользоваться им велик. Да и проще читать код, когда все один стилем написано, если конечно кроме этого эффекта там еще куча кода.
                                          • +1
                                            В IE не работает из за HTML5 элементов.

                                            document.createElement(«article»);
                                            document.createElement(«section»);

                                            И все будет работать
                                            • 0
                                              Да я то в курсе, просто, если не заморачиваться, чтобы код работал в старых браузерах — зачем использовать jQuery? Хотя hermit931 выразил разумную мысль, что если весь проект пишется на jQuery, то и для параллакса лучше использовать jQuery. Но есть же куча библиотек для этого и некоторые из них весьма неплохие.
                                      • 0
                                        Только сегодня в рассылке попадалась статья
                                        Parallax Tools and Techniques

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