JS Animated. Как работать с расширением RD-параллакс

Мы рады представить Вам полезный туториал, который покажет, как работать с расширением RD-параллакс в Веб-шаблонах.

Расширение «RD-parallax» используется для создания гибкого многослойного эффекта параллакс.

Работа со скриптом на странице состоит из нескольких простых шагов:

1. Для того чтобы работать с расширением RD-параллакс, откройте ваш клиент FTP или Файловый менеджер Панели управления хостингом и внесите изменения в страницу, на которой есть расширение «RD-parallax» или в HTML-файл, который используется для страницы, на которую Вы хотите добавить RD-параллакс. Внесите изменения в код, используя любой редактор кода, например, Notepad++, Sublime и т.д.

2. Базовая структура кода скрипта выглядит следующим образом:

   <!-- 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-->

   Каждый RD-параллакс слой задан как отдельный слой. Вы можете добавить неограниченное количество слоев.

3. Давайте ближе рассмотрим доступные атрибуты:

   • Для того чтобы изменить тип слоя, используйте атрибут data-type. Этот атрибут может иметь значения media и html. Атрибут data-type="media" может включать содержимое любого типа, например, фоновое видео, разные скрипты и т.д. Для того чтобы добавить содержимое в элемент «media», не указывайте тип содержимого. Код будет выглядеть следующим образом:

     <div class="rd-parallax-layer vide" data-speed="0.2" data-type="media">

   • Data-url используется для того чтобы задать фоновое изображение слоя.

     <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-url="path/to/your-image.jpg">

     Где path/to/your-image.jpg — это путь к вашему изображению.

   • Для того чтобы изменить скорость эффекта параллакс, используйте атрибут data-speed. Он может принимать значения от 0 до 2. Эта настройка определяет скорость прокрутки эффекта параллакс.

     <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-url="path/to/your-image.jpg">

   • Атрибут Data-blur используется для добавления эффекта размытости вашего параллакс-изображения. Data-blur может принимать значения «true», «false»:

     <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-blur="true">

     В этом случае эффект blur включен. Если Мы изменим значение на «false», изображение не будет иметь размытого фона.

   • Data-direction может принимать значения «inverse», «normal». Этот атрибут используется для указания направления прокрутки слоёв. Если Вы зададите значение «normal», параллакс будет двигаться параллельно прокрутке страницы, если «inverse» — в противоположном направлении. Вот пример кода:

     <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-direction="inverse">

   • Для того чтобы включить/отключить эффект появления слоя, Вы можете использовать атрибут date-fade. Атрибут «Data-fade» может принимать значения «true», «false».

         <div class="rd-parallax-layer" data-speed="0.3" data-type="html" data-fade="true">

   • Атрибут Data-mobile используется для того, чтобы включить/отключить отображение эффекта параллакс на мобильных устройствах. Вы можете использовать значения «true» или «false»:

     <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-mobile="true">

4. Измените файл в соответствии с вашими потребностями. Сохраните изменения и загрузите файл назад на сервер. Обновите сайт для просмотра изменений.

Вы можете также ознакомиться с детальным видео-туториалом ниже: