Smooth Background Parallax Scrolling Effect - jQuery AA-Paralax

AA-Paralax is a very small jQuery plugin that implements a smooth parallax scrolling effect on your background images with minimal effort.

How it works:

• Calculate offset based on element relative to window
• Start if element is at the top or within browser window 
• Stop if element heve been scrolled through

How to use it:

1. Add the 'aa-paralax' class to your parallax container and specify the scrolling speed using data-speed attribute as this:

<section class="aa-paralax bg-img" data-speed="2">
  ...
</section>

2. The required CSS styles for the parallax container.

.aa-paralax {
  position: relative;
  background-attachment: fixed;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 450px;
}

3. Add a background image to the parallax container:

.bg-img { background-image: url(bg.jpg); }

4. Put both jQuery library and the jQuery AA-Paralax plugin's script right before the closing body tag. That's it.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/aa-paralax.js"></script>

---

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