20 990 Скрипты / Parallax

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

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

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'
  });
})
Скачать 1596Загрузок 808,38 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи