Демонстрация
Документация
Общая информация
В данном разделе описана общая информация о скрипте, его особенности и нововведения
Нововведения (Changelog)
- : Обновлена документация
- : Добавлена версия 2.0.1;
Особенности
- Скрипт автоматически просчитывает размер изображения для паралакса, что позволяет использовать изображение размером даже 100х100;
- Скрипт адекватно работает на мобильных устройствах;
- Скрипт поддерживает эффект размытия для изображения в случае, если его размер слишком мал.
- Скрипт достаточно оптимизирован, что положительно сказывается на скорости его работы.
Порядок установки
В данном разделе описан порядок внедерения скрипта на страницу. Все необходимые файлы для Responsive шаблонов доступны в заготовке
Для кодеров других отделов, исходные файлы скрипта доступны в публичном репозитории.
Для упешного внедерения данного скрипта на страницу необходимо выполнить следующие действия:
Подключите стили
Для начала, в папку less/ вашего проекта необходимо скоппировать предложенный файл стилей _parallax.less. Далее, необходимо подключить его в вашем основном файле стилей style.less в секции Components с помощью директивы @import.
/*============================================
Components
============================================*/
/* Ваши компоненты */
/* Ваши импорты */
@import "_parallax.less"
Не забудьте выполнить компиляцию вашего LESS, кода после подключения предложенного файла стилей, для применения изменений в файле style.css
Подключите JS и проинициализируйте скрипт
В файле script.js, в конце, вам необходимо указать следующий код:
/* Parallax
=============================================*/
;(function ($) {
include('js/jquery.rd-parallax.js');
})(jQuery);
Так как скрипт поддерживает возможность самоинициализации, приведенного выше примера достаточно для подключения скрипта. Скрипт выполнит инициализацию паралакса для всех блоков с классом .parallax.
Укажите HTML
Базовая разметка для параллакса выглядит следующим образом:
<section class="parallax" data-url="images/parallax1.jpg" data-mobile="true">
</section>
Учтите, что атрибут data-url является обязательным для работы паралакса. Остальные атрибуты являются опциональными.
FAQ
В данном разделе описаны ответы на часто задаваемые вопросы
-
Вопрос: Как выполнить инициализацию для блока с классом отличным от .parallax?
Ответ:
$(document).ready(function () {
$('.my-parallax-selector).rdparallax({
url: 'images/parallax-image-name.jpg'
});
}); -
Вопрос: Можно задавать аттрибуты для параллакса неспосредтственно в HTML?
Ответ: Да, достаточно использовать параметр data-"опция" в аттрибутах блока, для которого выполняется инициализация.
<div class="parallax" data-direction="inverse"> ... </div>
Опции
В данном разделе описан перечень опций, доступных для настройки в скрипте
url
- Тип
- String
- Значение по-умолчанию
- null
Путь к файлу с изображением для паралакса
speed
- Тип
- Number
- Значение по-умолчанию
- 0.2
- Минимальное значение
- 0
- Максимальное значение
- 1
Задает коефициент скорости для паралакса относительно базовой скорости, которая расчитывается исходя и размеров блока паралакса и высоты окна браузера. 0 - Минимальная скорость паралакса (он перестает двигаться и ведет себя как статичное изображение). 1 - Максимальная скорость паралакса, равная базовой.
direction
- Тип
- String
- Значение по-умолчанию
- normal
- Доступные значения
- [normal, inverse]
Задает направление движения паралакса. Normal - паралакс движется в противоположную скроллу сторону, Inverse - параллельно с ним.
mobile
- Тип
- Boolean
- Значение по-умолчанию
- false
Включает/выключает эффект параллакса на мобильных устройствах.
blur
- Тип
- Boolean
- Значение по-умолчанию
- false
Включает/выключает эффект размытия изображения в случае, когда его размер слишком маленький.
pattern
- Тип
- Boolean
- Значение по-умолчанию
- false
Флаг для переключения режима дублирующейся текстуры для изображения.
duration
- Тип
- Number
- Значение по-умолчанию
- 200
Время анимации в ms для паралакса на мобильных устройствах.
easing
- Тип
- String
- Значение по-умолчанию
- 'linear'
Тип анимации для паралакса на мобильных устройствах.
color
- Тип
- String
- Значение по-умолчанию
- 'inherit'
Цвет для бекграунда
Классы
В данном разделе описан перечень классов, доступных для настройки в скрипте
При необходимости, в файле скрипта в объекте settings можно поменять имена для классов, используемых для реализации паралакса
wrapClass
- Значение по-умолчанию
- 'parallax'
Класс, который задается для базового блока, на котором выполнялась инициализация скрипта.
imageClass
- Значение по-умолчанию
- 'parallax_image'
Класс, который задается на изображение в паралаксе.
patternClass
- Значение по-умолчанию
- 'parallax_pattern'
Класс, который задается на изображение в паралаксе, в случае, когда изображение определено как текстура.
contentClass
- Значение по-умолчанию
- 'parallax_cnt'
Класс для блока, в который оборачивается контент в базовой блоке wrapClass