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

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

Демо

HTML разметка

Создаем два блока <section> с атрибутами "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

about-bg.jpg

Стилизуем сами элементы и их содержимое:

#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

Перебираем все элементы <section> с атрибутом 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')); 

Записываем значение 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 });         });     }); }); 

Спасибо всем за внимание.