Parallax

Package : com.danehansen.display
Class : public class Parallax
Inheritance : Parallax > Object

A class for parallaxing based on mouse position or device orientation. The root of the parallax object would be the parent housing all the children that should be parallaxed. This object could even be the document or window if desired. You can also pass in a singular jQuery object. Along with the JavaScript instantiation, some markup is required as well to make the effect work. Any child nodes that are intended to be parallaxed should include either/both data-parallax-x and data-parallax-y attributes, which should be set as numbers representing the distance in pixels the child node will travel on that axis. Negative nubmers can be used to have a reversed parallax effect. Top and left css values are fine to have on the child nodes, as this effect uses translate3d to move the children.

Public Properties

• speed : Number
  A number between 0 and 1 which represents the speed at which the parallax effect eases into its destination positioning. The default value is 0.2.

Public Methods

• Parallax(parent:Element, speed:Number = 0.2)
  Creates and activates a Parallax object, using the parent DOM element or jQuery object which the mouse positioning should be based on. An optional speed argument will immediately set the speed property.
• pause():*
  Causes the Parallax instance to temporarity cease operations.
• resume():*
  Resumes a paused Parallax instance’s operations.
• destroy():*
  Cleans up the instance when it is no longer needed.

EXAMPLE 1: BASIC PARALLAX

Markup

<div id="parallax_wrapper">
    <div id="parallax_field">
        <img data-parallax-x="0"   data-parallax-y="-20" id="parallax_bg"            src="img/field.jpg">
    </div>
    <div id="parallax_illustration">
        <img data-parallax-x="-75" data-parallax-y="-30" id="building_2"    src="img/building_2.png">
        <img data-parallax-x="-50" data-parallax-y="-20" id="building_1"    src="img/building_1.png">
        <img data-parallax-x="10"  data-parallax-y="10"  id="speedershadow" src="img/speeder_shadow.png">
        <img data-parallax-x="10"  data-parallax-y="10"  id="octocatshadow" src="img/octocat_shadow.png">
        <img data-parallax-x="10"  data-parallax-y="10"  id="speeder"       src="img/speeder.png">
        <img data-parallax-x="10"  data-parallax-y="10"  id="octocat"       src="img/octocat.png">
        <img data-parallax-x="20"  data-parallax-y="10"  id="error_text"    src="img/404.png">
    </div>
</div>

JavaScript

var parallax=new Parallax(document.getElementById("parallax_wrapper"));

parallax.pause(); parallax.resume();