Главная

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

2012-12-10 в 12:45, admin, рубрики: javascript, jquery, Веб-разработка

Доброго времени суток уважаемые читатели. На сегодняшний день 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 });
        });
    });
});