RD Parallax Documentation

Настройки скрипта

Скрипт поддерживает следующие опции для настройки

Общие настройки

Общие настройки скрипта определяются в объекте options при инициализации.

screenAliases
Тип
Object
Значение по-умолчанию
{ 0: '-', 480: '-xs-', 768: '-sm-', 992: '-md-', 1200: '-lg-', 1600: '-xl-', 1920: '-xxl-'}

Объект, содержащий алиасы имен для создания адаптивных настроек слоев паралакса. Например, data-md-speed и т.д.

Настройки сцены

Скрипт также поддерживает дополнительную настройку каждой сцены прямо в HTML с помощью data-аттрибутов

data-on, data-xs-on, data-sm-on, data-md-on, data-lg-on, data-xl-on, data-xxl-on
Тип
boolean
Значение
true, false

Определяет тип слоя параллакса. Если определен как media, будет производиться расчет размера слоя относительно высоты секции параллакса, если html - размер определяется контентом.

Настройки слоев

Скрипт также поддерживает дополнительную настройку каждого из слоев. Настройка каждого из слоев выполняется в HTML разметке слоя с помощью data-атрибут API.

data-type
Тип
String
Значение
media, html, custom

Определяет тип слоя параллакса. Если определен как media, будет производиться расчет размера слоя относительно высоты секции параллакса, если html - размер определяется контентом, custom - определяется вашими CSS стилями.

data-url
Тип
String

Определяет путь к изображению для отоборажения в качестве бекграунда слоя.

data-speed, data-xs-speed, data-sm-speed, data-md-speed, data-lg-speed
Тип
Number
Значение
0 ~ 2

Определяет скорость движения параллакса относительно движения скроллбара. Для большего понимания, если значение скорости равно 1 - получаем эмуляцию css свойства background-attachment: fixed.

data-fade
Тип
Boolean
Значение
true, false

Если установлен в true, слой будет постепенно проявляться из полной прозрачности в полную непрозрачность в зависимости от позиции скролла слоя.

data-blur
Тип
Boolean
Значение
true, false

Если определен как true включает размытие изображения в случае, когда его размер слишком маленький для качественного отображения в секции параллакса.

data-direction
Тип
String
Значение
inverse, normal

Определяет направление движения параллакса. Если определен, как normal - параллакс будет двигаться параллельно скроллу, если inverse - в противоположном направлении.

data-offset, data-xs-offset, data-sm-offset, data-md-offset, data-lg-offset
Тип
Integer
Значение
0

Указывает дополнительный офсет для слоя параллакса на соответствующем разрешении.

data-agent
Тип
Selector
Значение
document

Указывает на элемент, относительно которого будет выполняться позиционирование слоев параллакса. По-умолчанию - объект Document.