jQuery Plugin To Create Interactive Parallax Effects - Real Parallax

Real Parallax is a lightweight jQuery plugin to create interactive & sensitive background/object parallax effects that reacts to user's cursor.

Features:

• Supports inverted X and/or Y mouse sensitivity.
• Supports any level of easing.
• Custom parallax directions.
• Allows to focus on front or back objects.

See also:

• jQuery Plugin To Add Interative Parallax Effects To Objects - Piao
• Minimalist 3D Parallax Effect with jQuery and CSS3
• Smooth Parallax Effects with jQuery and CSS3 - woolParalax
• Interactive Mouse Hover Parallax Effect with jQuery - Mouse Parallax
• Simple and Lightweight jQuery Parallax Engine - Parallax.js
• Creating 3D Interative Parallax Background Effects with jQuery - Simples 3D
• Interactive Parallax Effect with jQuery - jparallax

How to use it:

1. Add the jQuery library and the jQuery real parallax plugin into your document.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.real-parallax.js"></script>

2. Insert a set of objects into your document as follows.

<div id="myParallax" class="glowbox overflow-hidden">
  <div id="l"></div>
  <div style="left:-1px;top:-1px;background-image: url(bg.jpg);background-repeat:repeat-x; height: 285px; width: 410px;" data-lock="yes"></div>
  <div style="left:38px;top:23px;" data-z="90"><img src="sun.png" width="332px" height="262px"/></div>
  <div style="left:-200px;top:184px;background-image: url(grass1.png);background-repeat:repeat-x; height: 285px; width: 800px;"></div>
  <div style="left:255px;top:115px;" data-z="70"><img src="g1.png" width="78px" height="98px"/></div>
  <div style="left:300px;top:100px;"  data-z="75"><img src="g2.png" width="83px" height="116px" /></div>
  <div style="left:-200px;top:177px;background-image: url(grass2.png);background-repeat:repeat-x; height: 285px; width: 800px;"></div>
  <div style="left:-200px;top:195px;background-image: url(grass3.png);background-repeat:repeat-x; height: 285px; width: 800px;"></div>
  <div style="left:-90px;top:80px;" data-z="35"><img src="tree.png" width="320px" height="160px" /></div>
  <div style="left:-200px;top:211px;background-image: url(grass4.png);background-repeat:repeat-x; height: 285px; width: 800px;"></div>
  <div style="left:-200px;top:231px;background-image: url(grass5.png);background-repeat:repeat-x; height: 285px; width: 800px;"></div>
  <div style="left:400px;top:115px;" data-z="-10"><img src="a1.png" width="200px" height="253px" /></div>
  <div style="left:-200px;top:252px;background-image: url(grass6.png);background-repeat:repeat-x; height: 285px; width: 800px;"></div>
  <div style="left:10px;top:240px;" data-lock="yes">
  </div>
</div>

3. The required CSS styles for the parallax plugin.

.overflow-hidden {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.glowbox {
  -moz-box-shadow: 0 0 3px 5px #000;
  -webkit-box-shadow: 0 0 3px 5px #000;
  box-shadow: 0 0 3px 5px #000;
}

.innerglowbox {
  box-shadow: inset 0 0 5px #000000;
  -moz-box-shadow: inset 0 0 5px #000000;
  -webkit-box-shadow: inset 0 0 5px #000000;
}

.bgblack {
  background-color: #000;
  color: #fff;
}

.content-img {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
}

.content-img:hover { opacity: 0.65; }

4. Active the parallax effect.

$('#myParallax').parallax({
width: 390,  
height: 270,
enableMouse: true,
activateOnClick: false,
sensitivityX: .5,
sensitivityY: .4,
easingCoefficient: 7,
autoZCoordinate: true,
useCustomZ: true,
focusZ: 100
}); 

---

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