Stellar.js добавляем эффект Parallax на Ваш сайт

Stellar.js - JQuery плагин, который позволяет создавать эффект параллакса. Официальный сайт проекта. Страница проекта на гитхабе.


Рассмотрим API плагина. Для начала запустим плагин:



// Например для всего сайта:
$(window).stellar();
// или для конкретного блока:
$("#main").stellar();
// можно использовать сокращенную запись
$.stellar();


Если нужно чтобы элементы прокручивались с разной скоростью, то добавьте следующий атрибут к нужному элементу.



У элемента должно быть задано свойство position: absolute, fixed или relative.



<div data-stellar-ratio="2">...</div>


Для реализации фонового параллакса в блоке используем следующий код:



<div data-stellar-background-ratio="0.5">...</div>


Для изменения отступов для всех элементов сразу используйте свойства



$.stellar({
horizontalOffset: 40,
verticalOffset: 150
});


Все свойства плагина:



$.stellar({
// Горизонтальный или вертикальный параллакс или все сразу.
horizontalScrolling: true,
verticalScrolling: true,

// Устанавливаем смещение
horizontalOffset: 0,
verticalOffset: 0,

// Обновляет параллакс при изменении окна браузера
responsive: false,

// Выбор свойства для расчета прокрутки
// 'scroll', 'position', 'margin' или 'transform',
// или написать собственный 'scrollProperty' плагин.
scrollProperty: 'scroll',

// Какие свойства используются для позиционирования элементов.
// Выбор между 'position' или 'transform',
// или так же можно написать собственный 'positionProperty' плагин.
positionProperty: 'position',

// Включить или отключить тип параллакса
parallaxBackgrounds: true,
parallaxElements: true,

// Скрывать элементы параллакса которые уходят за экран
hideDistantElements: true,

// Настройка появления или исчезновения элементов.
hideElement: function($elem) { $elem.hide(); },
showElement: function($elem) { $elem.show(); }
});