Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

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

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

JS Animated. Как работать с расширением 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. Измените файл в соответствии с вашими потребностями. Сохраните изменения и загрузите файл назад на сервер. Обновите сайт для просмотра изменений.

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

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