Easy jQuery Parallax Background Plugin - simpleParallax

A simple & easy-to-use jQuery parallax background plugin that enables a parallax scrolling effect on your background images.

How to use it:

1. Load the JQuery library and the jQuery simpleParallax plugin at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.simpleparallax.js"></script>

2. Add background images into DIV elements with a same class of 'parallax'. Use Html5 data-* attributes to customize the parallax effect for each background image.

<div class="parallax" style="background-image: url(1.jpg);">
  ...
</div>
<div class="parallax" data-speed="0.5" style="background-image: url(2.jpg);">
  ...
</div>
<div class="parallax" style="background-image: url(3.jpg);" data-bg-color="#fc9400" data-overlay-opacity="0.3">
  ...
</div>
<div class="parallax" style="background-image: url(4.jpg);" data-overlay-class="gradient" data-overlay-opacity="0.6">
  ...
</div>
<div class="parallax" style="background-image: url(5.jpg);" data-overlay-class="pattern" data-overlay-opacity="0.6">
  ...
</div>
<div class="parallax" style="background-image: url(6.jpg);" data-overlay-class="pattern" data-bg-color="#fc9400" data-overlay-opacity="0.6">
  ...
</div>

3. Initialize the plugin.

$(".parallax").simpleParallax();

4. The CSS styles for the amazing overlays.

.parallax-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}
.parallax-overlay.pattern {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2NkwAT/GdHE/gP5jMiCYAGQIpggXAAmiCIAEgQAAE4FBbECyZcAAAAASUVORK5CYII=) repeat fixed;
}
.parallax-overlay.gradient {
  background-color: #00eaff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#00eaff), to(#88006d));
  background-image: -webkit-linear-gradient(top, #00eaff, #88006d);
  background-image: -moz-linear-gradient(top, #00eaff, #88006d);
  background-image: -ms-linear-gradient(top, #00eaff, #88006d);
  background-image: -o-linear-gradient(top, #00eaff, #88006d);
}

5. Available options.

speed: 0.25,
overlay: {
  bgColor: "rgba(0, 0, 0, 0)",
  opacity: 0.5,
  overlayClass: false
}

Change log:

2014-09-08

• fix styles.

---

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