How to make use of it:

1. Add background photographs 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 preliminary place of those background photographs.

.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 principle script jQ-parallax.js after jQuery and the plugin will deal with the remainder.

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

Parallax Effect For DOM Elements With BG Images, jQParralax Plugin/Github, parallax scrolling examples, parallax image

See Demo And Download