Smooth Parallax Scrolling Effect with jQuery - Parallaxator

An extremely lightweight and easy-to-use jQuery plugin that enables you to apply smooth parallax scrolling effect to any html elements such as text and images.

How to use it:

1. Add the jQuery Parallaxator plugin's script at the end of the webpage, after you've added jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="fm.parallaxator.jquery.js"></script>

2. Add a parallax image into a position: relative container and use the data-parallaxator-reverse to specify the scroll direction.

<div class="parallaxator">
  <img class="parallax_child" src="1.jpg" 
       data-parallaxator-reverse="true">
</div>

3. The required CSS to make the parallax image

.parallaxator {
  overflow: hidden;
  position: relative;
}

.parallaxator > .parallax_child {
  position: absolute;
  top: 0;
}

4. That's it. You can also apply the parallax scrolling effect to any elements like multi-line text as follow.

<div class="parallaxator">
  <h1 class="parallax_child" 
      data-parallaxator-reverse="false">
      This is section<br>
      This is section<br>
      This is section<br>
  </h1>
</div>

---

This awesome jQuery plugin is developed by QODIO. For more Advanced Usages, please check the demo page or visit the official website.