JS Animated. How to manage RD-parallax extension

We are glad to provide you with a useful guide on working with RD-parallax extension in Website templates.

RD-parallax extension is used to create flexible multilayer parallax effect.

The script introduction on the page consists of a few simple steps:

1. In order to work with RD-parallax extension, you should go to FTP or File Manager at Hosting CPanel and edit the file that is used for the page that includes RD-parallax extension or HTML file used for the page you wish RD-parallax to be added to. Edit it with any code editor like Notepad++, Sublime, etc.

2. Basic script code structure appears as follows:

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

   Each RD-parallax layer is set as a separste layer. You can add unlimited number of layers.

3. Let’s take a closer look at all attributes available:

   • In order to change type of layer, you should use data-type data attribute. This attribute can take media and html values. data-type="media" attribute can include any content type, like background video, various scripts, etc. In order to add any custom content to the media object, you do no need to specify media type. Your code will look as follows:

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

   • Data-url is used for the layer background image setup.

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

     Where path/to/your-image.jpg is your image path.

   • To configure parallax speed, you should use data-speed attribute. It can take values from 0 to 2. This option defines parallax scrolling speed.

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

   • Data-blur attribute is used for adding blur effect for your parallaх image. Data-blur can take true, false values:

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

     In this case blur effect is enabled. If we change it to false, our image will have no blur background on it.

   • Data-direction attribute can take inverse, normal values. This attribute is used for the layer scrolling direction setup. If you set it to normal parallax will move parallel to page scroll, if to inverse – in the opposite direction. Here is the code example:

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

   • In order to enable/disable the layer appearance effect, you can use date-fade attribute. Data-fade attribute can take values true, false.

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

   • Data-mobile attribute is used to enable/disable parallax display on mobile devices. You can use true or false values here:

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

4. Modify file to your needs. Save the changes and upload it back to your server. Refresh your site to see the changes.

Feel free to check the detailed video tutorial below: