Mouse- and Orientation-aware jQuery Parallax Effect Plugin - Parallaxify

Parallaxify is a jQuery parallax effect plugin for creating an interactive moving background that responds to mouse movement. Also allows you to create an iOS style motion / parallax effects that are related to the orientation of the user's device based on gyroscope sensor.

Basic usage:

1. Download and include the jQuery Parallaxify plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="path/to/jquery.parallaxify.min.js"></script>

2. Create a container where you want to apply the parallax effect. Use data-*attributes to specify the horizontal and vertical distances that each element can or should travel.

• data-parallaxify-range
• data-parallaxify-range-x
• data-parallaxify-range-y
• data-parallaxify-background-range
• data-parallaxify-background-range-x
• data-parallaxify-background-range-y

<div class="demo" data-parallaxify-range="300"></div>

3. Configuration options.

$.parallaxify({
// enable parallax effect for horizontal, vertical or both directions
horizontalParallax: true,
verticalParallax: true,

// enable or disable parallax effect for elements or backgrounds
parallaxBackgrounds: true,
parallaxElements: true,

// set which positioning property is to be used
// options include 'position' or 'transform' using css transformations
positionProperty: 'position',

// enable for responsive layouts
// (upon orientation changes or window resizing element positions are reevaluated
responsive: false,

// enable or disable mouse or gyroscope data as input for the plugin
useMouseMove: true,
useGyroscope: true,

// use a Low Pass Filter to smooth sensor readings (1 = no filter)
alphaFilter: 0.9,

// set which motion type algorithm is to be used
// options include 'natural', 'linear', 'gaussian', or 'performance'
motionType: 'natural',
mouseMotionType: 'gaussian',

// define which sensor input has priority over the other
// options are either 'mouse' or 'gyroscope'
inputPriority: 'mouse',

// define the delta angle (0 < motionAngle < 90) 
// that is used to render max parallax in this direction
motionAngleX: 80,
motionAngleY: 80,

// enable of adjustment of base position (using a Low Pass Filter)
// (adapting to device usage while plugin is running)
adjustBasePosition: true,
// alpha for Low Pass Filter used to adjust average position
alphaPosition: 0.05,
});

Changelog:

2016-12-08

• fixed for jQuery 3.0+

---

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