RD Parallax

Easy and Flexible multilayer parallax effect. Easy integration with other plugins.

Check out this Demo to see it in action!

Extended documentation is available here: Documentation

Setup

The HTML markdown is really simple. Just create a set of layers that you want to move within your parallax scene giving each layer a class rd-parallax-layer and some additional data attributes.

<!-- RD Parallax -->
<section class="rd-parallax"></section>
  <!-- Creates a parallax media layer recalculating its height according to scene height -->
  <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-url="path/to/your-image.jpg"></div>
  <!-- Creates a static flow html layer -->
  <div class="rd-parallax-layer" data-speed="0.3" data-type="html" data-fade="true">
    <!-- Your static content goes here-->
  </div>
</section>
<!-- END RD Parallax-->

Note: You can use any content if you want for media layer, such as background videos etc. Just remove data-url attribute and put your content inside the media layer

Apply the parallax styles to the scene

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

Finally, initialize the script

$(document).ready(function () {
    o.RDParallax({}); // Additional options
});

Further Customization

Check out our extended documentation for additional instructions: Documentation

License

Licensed under dual CC By-SA 4.0 and GPLv3