Simple and Lightweight jQuery Parallax Engine - Parallax.js

File Size: 245KB
Views Total: 5709
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple and Lightweight jQuery Parallax Engine - Parallax.js

Parallax.js is a simple and lightweight parallax plugin for jQuery that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

How to use it:

1. Include jQuery library and jQuery Parallax.js on the web page

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

2. Markup html structure

<ul id="scene" class="scene">
<li class="layer" data-depth="1.00"><img src="images/layer1.png"></li>
<li class="layer" data-depth="0.80"><img src="images/layer2.png"></li>
<li class="layer" data-depth="0.60"><img src="images/layer3.png"></li>
<li class="layer" data-depth="0.40"><img src="images/layer4.png"></li>
<li class="layer" data-depth="0.20"><img src="images/layer5.png"></li>
<li class="layer" data-depth="0.00"><img src="images/layer6.png"></li>
</ul>

3. Just call the plugin and you're done

<script>
$('.scene').parallax();
</script>

4. Options

$('.scene').parallax({
calibrateX: false, // Specifies whether or not to cache & calculate the motion relative to the initial x axis value on initialisation.
calibrateY: true, // Specifies whether or not to cache & calculate the motion relative to the initial y axis value on initialisation.
invertX: false, // true moves layers in opposition to the device motion, false slides them away.
invertY: true, // true moves layers in opposition to the device motion, false slides them away.
limitX: false, // A numeric value limits the total range of motion in x, false allows layers to move with complete freedom.
limitY: 10, // A numeric value limits the total range of motion in y, false allows layers to move with complete freedom.
scalarX: 2, // Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.
scalarY: 8, // Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.
frictionX: 0.2, // The amount of friction the layers experience. This essentially adds some easing to the layer motion.
frictionY: 0.8 // he amount of friction the layers experience. This essentially adds some easing to the layer motion.
});

Change log:

2013-09-04

  • Updated User Agent test for desktop boolean flag.
  • Modified fallback logic to setTimeout callback, checking orientation status.

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