Creating 3D Interative Parallax Background Effects with jQuery - Simples 3D

Simples 3D is a jQuery plugin that creates a 3D parallax effect on your container's background by moving the background images or Html objects at different speeds when user mouse moving.

See also:

• jQuery Plugin To Add Interative Parallax Effects To Objects - Piao
• Simple and Lightweight jQuery Parallax Engine - Parallax.js
• Interactive Parallax Effect with jQuery - jparallax

How to use it:

1. Load the jQuery simples 3D plugin after jQuery library before closing body tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.simple3D.js"></script>

2. Add some DIV elements with background images in a container where you want to apply on a background image parallax effect.

<div id="simple3D">
<div class="dot"></div>
<div class="kinoco"></div>
<div class="star"></div>
</div>	

3. The CSS styles.

#simple3D {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 900px;
}
#simple3D div {
  min-height: 1100px;
  width: 120%;
}
#simple3D div.dot {
  background: url(../images/dot2.png);
}
#simple3D div.kinoco {
  background: url(../images/kinoco.png);
}
#simple3D div.star {
  background: url(../images/star.png);
}	

4. Call the plugin on the container and set the options for the parallax effect.

<script>
$("#simple3D").simple3D({
moveX:3, // 1 - 5
moveY:3, // 1 - 5
bgImage:true, // use background image mode
targetAll:true,
reverseX: true,
reverseY: true
});
</script>

---

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