BgScroll.js — параллакс эффект для фона при прокрутке страницы

Параллакс эффект применяемый к фоновым изображениям при прокрутке страницы вверх или вниз. Плагин очень легкий и простой в использовании.

HTML

Нужно создать на странице блоки у которых будет фоновое изображение

<div class="bg bg--1"></div>
<div class="bg bg--2"></div>
<div class="bg bg--3"></div>
<div class="bg bg--4"></div>

CSS

Пример стилей, которые могут быть использованы для оформления блоков с фоном

.bg{
  height: 80vh;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
}
.bg--1{
  background-image: url('../img/bg1.jpg');
}
.bg--2{
  background-image: url('../img/bg2.jpg');
}
.bg--3{
  background-image: url('../img/bg3.jpg');
}
.bg--4{
  background-image: url('../img/bg4.jpg');
}

JS

Для работы плагина потребуется библиотека jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/bgscroll.js"></script>

Пример инициализации плагина и его опции

$(window).scroll(function(){
  $('.bg--1').bgscroll({
    direction: 'bottom', // направление bottom или top
    bgpositionx: 50, // x позиция фонового изображения, от 0 до 100, размерность в %, 50 - означает по центру
    debug: false, // Режим отладки
    min:0, // минимальное положение (в %) на которое может смещаться фон
    max:100 // максимальное положение (в %) на которое может смещаться фон
  });
  $('.bg--2').bgscroll({
    direction: 'top'
  });
  $('.bg--3').bgscroll({
    direction: 'top'
  });
  $('.bg--4').bgscroll({
    direction: 'bottom'
  });
})