Stellar.js это JQuery плагин, который позволяет создавать эффект параллакса(Parallax) на любом блоке.
Инициализация плагина
Что бы запустить плагин нужно сделать следующее:
1 2 3 4 | // Например для всего сайта: $(window).stellar(); // или для конкретного блока: $("#main").stellar(); |
Так же можно использовать сокращенную запись:
1 | $.stellar(); |
Этот код определит все элементы на сайте с соответствующими атрибутами плагина и применит к этим блокам параллакс эффект.
Параллакс элементы
Если нужно чтобы элементы прокручивались с разной скоростью, то добавьте следующий атрибут к нужному элементу. У элемента должно быть задано свойство position: absolute, fixed или relative.
1 | <div data-stellar-ratio="2">...</div> |
Соотношение вычисляется относительно стандартной скорость прокрутки, поэтому при коэффициенте 0,5 элемент будет прокручиваться в половину стандартной скорости, если установить коэффициент 1, эффекта никакого не будет, и коэффициент 2 прокрутит элемент в два раза быстрее.
Фоновый параллакс
Для реализации фонового параллакса в блоке используем следующий код:
1 | <div data-stellar-background-ratio="0.5">...</div> |
Настройка положения
В этом плагине это самая мощная функция выравнивания элементов.
Все элементы будут возвращаются в первоначальное положение, когда их основное смещение равно тому которое указано в свойстве эффекта относительно этого блока +/- собственные отступы. Такая функция позволяет легко создавать сложные параллакс структуры.
Для изменения отступов для всех элементов сразу используйте свойства:
1 2 3 4 | $.stellar({ horizontalOffset: 40, verticalOffset: 150 }); |
Либо указав нужные атрибуты прямо в теге элемента:
1 | <div data-stellar-ratio="2" data-stellar-horizontal-offset="40" data-stellar-vertical-offset="150">...</div> |
Настройка положения родителя
По умолчанию, это смещение относительно смещения элемента родителя. Для включение этого параметра добавим атрибут к тегу:
1 | <div data-stellar-offset-parent="true">...</div> |
Смещение элемента родителя так же может иметь собственное смещение:
1 | <div data-stellar-offset-parent="true" data-stellar-horizontal-offset="40" data-stellar-vertical-offset="150">...</div> |
Все свойства плагина:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | $.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(); } }); |