Pull to refresh

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

Reading time 2 min
Views 125K
Доброго времени суток уважаемые хабраюзеры. На сегодняшний день 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 });
        });
    });
});

Демо

Спасибо всем за внимание.
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+24
Comments 39
Comments Comments 39

Articles