- 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(); } });