jQuery

【jQuery】背景にパララックス効果を追加するParallaxify

December 11, 2016
Parallaxify

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

Demos

Galaxy
iOS 7 MockUp

Get things going

// 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

Fine tuning the plugin

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

Positioning

    // 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'
    });

Motion algorithms

// 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