Creating 3D Interative Parallax Background Effects with jQuery - Simples 3D
File Size: | 509 KB |
---|---|
Views Total: | 11268 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.