RD Parallax Documentation

Как использовать

Внедрение скрипта на страницу сводится к нескольким простым шагам.

Обратите внимание: предложенный вариант инициализации может отличаться в зависимости от продукта, в котором он внедряется. Информация предоставленная ниже лишь отображает принципы работы со скриптом.

Скачайте скрипт из Git'a

Для начала необходимо скачать данный скрипт из нашего публичного репозитория: Кликабельно

Добавьте необходимую разметку

HTML разметка по умолчанию для создания параллакса выглядит следующим образом.

<!-- RD Parallax -->
<section class="rd-parallax">
  <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-url="path/to/your-image.jpg"></div>
  <div class="rd-parallax-layer" data-speed="0.3" data-type="html" data-fade="true">
    ...
  </div>
</section>
<!-- END RD Parallax-->

Обратите внимание: блок с дата атрибутом data-type="media" может содержать любой кастомный контент, например различные скрипты слайдеров, бекграунд видео и т.д. Для того, чтобы разместить кастомный контент внутри медиа объекта, просто не указывайте дата атрибут data-url.

Подключите стили

Подключите файл стилей rd-parallax.css в секции <head/> целевой страницы.

<link rel="stylesheet" href="path/to/css/rd-parallax.css">

Подключите скрипт на странице

Вам необходимо скоппировать скрипт в папку /js вашего проекта и выполнить его подключение на странице. Для это можно исспользовать следующий участок кода:

<script src="js/rd-parallax.min.js"></script>

Выполните инициализацию скрипта

Вам необходимо выполнить инициализацию скрипта для элементов по целевому селектору, с помощью следующего участка кода

<script>
  $(document).ready(function () {
    $.RDParallax({}); // Additional options
  });
</script>