PARALLAX.JS – Simple, lightweight Parallax Engine

Simple, lightweight Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

PARALLAX.JS – Simple, lightweight Parallax Engine

DEMO | DOWNLOAD

Setup

Simply create a list of elements giving each item that you want to move within your parallax scene a class oflayer and a data-depth attribute specifying its depth within the scene. A depth of  will cause the layer to remain stationary, and a depth of 1 will cause the layer to move by the total effect of the calculated motion. Values inbetween  and 1 will cause the layer to move by an amount relative to the supplied ratio.

<ul id="scene">
  <li class="layer" data-depth="0.00"><img src="layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer1.png"></li>
</ul>

To kickoff a Parallax scene, simply select your parent DOM Element and pass it to the Parallax constructor.

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

Behaviours

There are a number of behaviours that you can setup for any given Parallax instance. These behaviours can either be specified in the markup via data attributes or in JavaScript via the constructor and API.

Behavior Values Description
calibrate-x true orfalse Specifies whether or not to cache & calculate the motion relative to the initial x axis value on initialisation.
calibrate-y true orfalse Specifies whether or not to cache & calculate the motion relative to the initial y axis value on initialisation.
invert-x true orfalse true moves layers in opposition to the device motion, false slides them away.
invert-y true orfalse true moves layers in opposition to the device motion, false slides them away.
limit-x number orfalse A numeric value limits the total range of motion in xfalse allows layers to move with complete freedom.
limit-y number orfalse A numeric value limits the total range of motion in yfalse allows layers to move with complete freedom.
scalar-x number Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.
scalar-y number Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.
friction-x number0 - 1 The amount of friction the layers experience. This essentially adds some easing to the layer motion.
friction-y number0 - 1 The amount of friction the layers experience. This essentially adds some easing to the layer motion.
Related post:  OWL Carousel - Touch enabled beautiful responsive carousel slider

In addition to the behaviours described above, there are two methods enable() and disable() that activateand deactivate the Parallax instance respectively.

Behaviors: Data Attributes Example

<ul id="scene"
  data-calibrate-x="false"
  data-calibrate-y="true"
  data-invert-x="false"
  data-invert-y="true"
  data-limit-x="false"
  data-limit-y="10"
  data-scalar-x="2"
  data-scalar-y="8"
  data-friction-x="0.2"
  data-friction-y="0.8">
  <li class="layer" data-depth="0.00"><img src="graphics/layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="graphics/layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="graphics/layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="graphics/layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="graphics/layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="graphics/layer1.png"></li>
</ul>

Behaviors: Constructor Object Example

var scene = document.getElementById('scene');
var parallax = new Parallax(scene, {
  calibrateX: false,
  calibrateY: true,
  invertX: false,
  invertY: true,
  limitX: false,
  limitY: 10,
  scalarX: 2,
  scalarY: 8,
  frictionX: 0.2,
  frictionY: 0.8
});

Behaviors: API Example

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
parallax.enable();
parallax.disable();
parallax.calibrate(false, true);
parallax.invert(false, true);
parallax.limit(false, 10);
parallax.scalar(2, 8);
parallax.friction(0.2, 0.8);

jQuery

If you’re using jQuery or Zepto and would prefer to use Parallax.js as a plugin, you’re in luck!

$('#scene').parallax();

jQuery: Passing Options

$('#scene').parallax({
  calibrateX: false,
  calibrateY: true,
  invertX: false,
  invertY: true,
  limitX: false,
  limitY: 10,
  scalarX: 2,
  scalarY: 8,
  frictionX: 0.2,
  frictionY: 0.8
});

jQuery: API

var $scene = $('#scene').parallax();
$scene.parallax('enable');
$scene.parallax('disable');
$scene.parallax('calibrate', false, true);
$scene.parallax('invert', false, true);
$scene.parallax('limit', false, 10);
$scene.parallax('scalar', 2, 8);
$scene.parallax('friction', 0.2, 0.8);

iOS

If you are writing a native iOS application and would like to use parallax.js within a UIWebView, you will need to do a little bit of work to get it running.

UIWebView no longer automatically receives the deviceorientation event, so your native application must intercept the events from the gyroscope and reroute them to the UIWebView:

  1. Include the CoreMotion framework #import <CoreMotion/CoreMotion.h> and create a reference to theUIWebView @property(nonatomic, strong) IBOutlet UIWebView *parallaxWebView;
  2. Add a property to the app delegate (or controller that will own the UIWebView)@property(nonatomic, strong) CMMotionManager *motionManager;
  3. Finally, make the following calls:
  self.motionManager = [[CMMotionManager alloc] init];

  if (self.motionManager.isGyroAvailable && !self.motionManager.isGyroActive) {

    [self.motionManager setGyroUpdateInterval:0.5f]; // Set the event update frequency (in seconds)

    [self.motionManager startGyroUpdatesToQueue:NSOperationQueue.mainQueue
                                    withHandler:^(CMGyroData *gyroData, NSError *error) {

      NSString *js = [NSString stringWithFormat:@"parallax.onDeviceOrientation({beta:%f, gamma:%f})", gyroData.rotationRate.x, gyroData.rotationRate.y];

      [self.parallaxWebView stringByEvaluatingJavaScriptFromString:js];

    }];
  }

Build

cd build
npm install
node build.js

Author

Matthew Wagerfield: @mwagerfield

Related post:  Why Responsive Web Design Is Important? – Stats and Trends [Infographic]

License

Licensed under MIT. Enjoy.


More info: github

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close