Простая техника эффекта параллакса

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

Разметка

Данная техника базируется на управлении скоростью перемещения фонового изображения. Создадим разметку HTML, содержащую две секции с атрибутами "data-type" и "data-speed". Назначение атрибутов раскроется чуть позже:

<section id="home" data-type="background" data-speed="10">
</section>
<section id="about" data-type="background" data-speed="10">
</section>

Теги <section> с атрибутами data-type и data-speed позволяют сделать разметку простой и понятной.

В соответствии со спецификацией любые атрибуты, начинающиеся на data- будут обрабатываться как хранилище частных данных. Дополнительно, они не оказывают влияния на шаблон.

Так как нам нужно управлять скоростью прокручивания фоновых изображений, то для ключевых параметров мы будем использовать data-type="background" и data-speed="10".

Затем добавим тег <article> в каждый тег <section>.

<section id="home" data-type="background" data-speed="10" class="pages">
         <article>Абсолютное позиционирование</article>
    </section>
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Простой эффект параллакса</article>
</section>

Мы будем прокручивать фон тега  <section> медленнее, чем его содержание, то есть <article>. Таким образом создается иллюзия параллакса.

CSS

Прежде, чем перейти к магии jQuery добавим фоновые изображения для каждого элемента <section> в коде CSS.

#home {
background: url(home.jpg) 50% 0 repeat fixed; min-height: 1000px;
}
#about {
background: url(about.jpg) 50% 0 no-repeat min-height: 1000px;
}

И определим стили для остальных элементов нашей демонстрационной страницы.

#home {
  background: url(home-bg.jpg) 50% 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: 150px;
  width: 100%;
}
#about {
  background: url(about-bg.jpg) 50% 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: 150px;
  width: 100%;
}

Магический код

Используем jQuery. Начнем со стандартного метода document.ready(), чтобы быть в уверенности о загрузке страницы и ее готовности к манипуляциям.

$(document).ready(function(){
});

Теперь нужно внимание. Первое, что здесь происходит - итерация по всем элементам <section> с атрибутом data-type="background" на странице.

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
      var $bgobj = $(this); // Назначаем объект
    });
});

В функцию .each() добавим другую функцию .scroll(), которая вызывается в момент начала прокрутки.

var yPos = -($window.scrollTop() / $bgobj.data('speed'));

// Собираем положение фона
var coords = '50% '+ 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'));
            // Собираем значение координат фона вместе
            var coords = '50% '+ yPos + 'px';
            // Смещаем фон
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

// Создаем элементы для IE
document.createElement("article");
document.createElement("section");