Parallax Effect For DOM Elements With BG Images - jQParralax

jQParralax is a super tiny jQuery plugin that applies a parallax scrolling effect to any DOM elements with background images.

How It Works:

• Check if the DOM element is in the viewport.
• Slightly adjust the position of the background image on page scroll.

See Also:

• 10 Best Parallax Scrolling Effects

How to use it:

1. Add background images to the parallax containers with the CSS class of 'parallax-background'.

<div class="parallax-background" style="background-image:url('1.jpg');">
  Parallax Effect 1
</div>

<div class="parallax-background" style="background-image:url('1.jpg');">
  Parallax Effect 2
</div>

<div class="parallax-background" style="background-image:url('1.jpg');">
  Parallax Effect 3
</div>

<div class="parallax-background" style="background-image:url('1.jpg');">
  Parallax Effect 4
</div>

...

2. Specify the initial position of these background images.

.parallax-background {
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

3. Load the main script jQ-parallax.js after jQuery and the plugin will take care of the rest.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jQ-parallax.js"></script>

---

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