JP Parallax

Parallax library for GumGum creatives

Working example creatives can be found on the downloads-examples page.

CDN latest release:

• //cdn.justpremium.com/Justpremium/boilerplate/js/jp-parallax_1.0.1.js

Installation

• Include the script in your html file, ensuring gsap is also included:

<script src="//cdn.justpremium.com/Justpremium/boilerplate/lib/gsap_3.6.0.js"></script>
<script src="//cdn.justpremium.com/Justpremium/boilerplate/js/jp-parallax_1.0.1.js"></script>

Implementation

Create an array of objects. One object for each HTML element required to be part of the parallax. Use this array as the first parameter of the constructor.

Here are all the recognised properties for each object:

property	value
selector	CSS selector required
motionX	decimal percentage of mouse/gyro x to move required
motionY	decimal percentage of mouse/gyro y to move required
maxMotionX	maximum pixels to move in x direction default:unset
maxMotionY	maximum pixels to move in y direction default:unset
limit	which edges of the elemnt to limit - accepts 'left', 'right', 'top', 'bottom' or combination of any default:unset

API

JPParallax(config, addEvents)

Constructor to create a new JPParallax instance.

Parameter	Definition
config	config array, explained above required
addEvents	boolean, to use the library's default mouse or gyroscope events default:true

 var config = [{
        selector: ".background",
        motionSizeX: .4,
        motionSizeY: .1,
        maxMotionX: 10,
        maxMotionY: 10,
    },
    {
        selector: "#image-a",
        motionSizeX: .5,
        motionSizeY: .2,
    },
    {
        selector: "#image-b",
        motionSizeX: 1.5,
        motionSizeY: .3,
        limit: "left right bottom"
    }
 ]
 var jpParallax = new JPParallax(config);

HTML for the above JavaScript

<div class="background" style="background-image:url(assets/bg.jpg)"></div>
<img id="image-a" src="assets/image-a.png" alt="">
<img id="image-b" src="assets/image-b.png" alt="">

on(event, func)

Registers JPParallax events with a function callback

Parameter
event	event name required
func	function callback required

jpParallax.on(JPParallax.Event_Permission, function(response) {
    if (response === "denied") {
        // device will not allow gyroscope access
    } else {
        // show a button to request permission
    }
});

jpParallax.on(JPParallax.Event_Granted, function() {
    gsap.to("#permission-btn", { autoAlpha: 0 });
});

Events

JPParallax.Event_Permission === "permission";
JPParallax.Event_Granted === "granted";

requestPermission()

Requests permission to access the gyroscope. Must be called by a click or touch event.

permissionBtn.addEventListener("click", function() {
    jpParallax.requestPermission();
});

update(xMotion, yMotion)

Updates the parallax position. This is done from within the library by default (if autoEvents === true)

Parameter
xMotion	motion along x axis, in pixels default:0
yMotion	motion along y axis, in pixels default:0

jpParallax.update(5, -1);

motionSize

Setter to set global motion size (default:0.2)

jpParallax.motionSize = .6;

motionTime

Setter to set global motion time (default:0)

jpParallax.motionTime = .6;