Parallaxifyは、ジャイロセンサーやマウスに基づいて要素や背景に視差効果を追加するjQueryプラグイン。

Galaxy
iOS 7 MockUp

// Run it on single element
$('#my-wrapper').parallaxify();
// or globally
$.parallaxify();

$('#my-element').hover(
function(){
$(this).parallaxify(args);
},
function(){
$(this).parallaxify('destroy');
}
);

<div data-parallaxify-range-x="100" data-parallaxify-range-y="50"></div>

    <div data-parallaxify-background-range="100"></div>

1. data-parallaxify-range
2. data-parallaxify-range-x
3. data-parallaxify-range-y
4. data-parallaxify-background-range
5. data-parallaxify-background-range-x
6. data-parallaxify-background-range-y

$.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,
});

// enable parallaxify with CSS3 transformations for positioning
$('#element').parallaxify({
positionProperty: 'transform'
});
// defining your own positioning function
$.parallaxify.positionProperty.rotate = {
setPosition: function($element, left, originalLeft, top, originalTop) {
$element.css('transform', 'rotateX(' + left + 'deg) rotateY(' + top + 'deg)');
}
};
// using your own positioning function
$('#other').parallaxify({
positionProperty: 'rotate'
});

// enable parallaxify with natural motion (based on sensor data) and the gaussian algorithm for mouse movement
$('#element').parallaxify({
motionType: 'natural',
mouseMotionType: 'gaussian'
});
// defining your own motion type
// example for linear motion
$.parallaxify.motionType.linear = {
function(delta, deltaMax) {
if (delta <= -deltaMax) return 1;
if (delta >= deltaMax) return -1;
return -delta/deltaMax;
}
};
// using the linear positioning function
$('#other').parallaxify({
positionProperty: 'linear'
});

MIT