Tiny jQuery Plugin For Parallax Scrolling Background

Just another jQuery Parallax Plugin which makes it easier to apply a smooth parallax scrolling effect on background images using CSS 'background-position' property.

How to use it:

1. Create a container on which you want to apply the parallax scrolling effect.

<div class="parallax-image">
  ...
</div>

2. The parallax container must have a fixed height:

.parallax-image {
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 600px;
}

3. Add a background image to the parallax container.

.parallax-image {
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 600px;
  background-image: url(bg.jpg);
  position: relative;
}

4. Place jQuery library and the minified version of the parallax-backgrounds.js right before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="parallax-backgrounds.min.js"></script>

5. Enable the parallax scrolling effect on the background image:

$('.parallax-image').parallaxBackgrounds();

---

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