- 15.02.2015 7:21
- ← Назад к списку
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(); }
});
