RD Parallax Documentation

Интеграция с Require.js

Скрипт имеет встроенную поддержку AMD экспорта для интеграции с Require.js. Весь процесс интеграции все также сводится к нескольким простым шагам.

Скачайте скрипт из 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">

Обновите конфигурацию require.js

Прежде всего вам нобходимо убедиться в правильности настройки конфигурации путей в require.js. Обязательно необходимо определить алиасы jquery и jquery.rd-parallax. В большинстве случаев, данная конфигурация определяется в главном скрипте приложения, путь к которому определяется в дата атрибуте data-main при подключении require.js

<script data-main="js/main" src="js/require.js"></script>

Сама конфигурация должна содержать следующие алиасы для путей

requirejs.config({
  paths: {
    "jquery": "path/to/jquery"
    "jquery.rd-parallax": "path/to/jquery.rd-parallax"
  }
});

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

Для инициализации скрипта достаточно воспользоваться следующим кодом.

requirejs(["jquery", "jquery.rd-parallax"], function($, parallax) {
  $.RDParallax();
});