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.