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

Возможно вас это заинтересует
comments powered by HyperComments