cursor-parallax

This is a simple parallax library that works with cursor and device orientation.

Support

It works with ES5 's vanilla JS on browsers supporting translate3d.

Demo

demo

Usage

HTML

<div class="parallax-wrapper">
  <!-- set depth 0 ~ 1 -->
  <div class="layer" data-depth="1">
    <!-- something to contents -->
  </div>
  <div class="layer" data-depth=".5">
    <!-- something to contents -->
  </div>
  <div class="layer" data-depth="0">
    <!-- something to contents -->
  </div>
</div>
<button id="requestButton">Request permission of deviceOrientationEvent</button>

JS

var elm = document.querySelector('.parallax-wrapper');
var cursorParallax = new CursorParallax(elm, {
  easing: 'ease-out',
  duration: '.6s',
  mousemoveRatio: 0.5,
  deviceorientationRatio: 1,
  mousemove: true,
  deviceorientation: true,
  isUsedTheFirstTilt: false, // Whether to parallax with initial tilt as 0
});
var elm_requestButton = document.getElementById('requestButton');
if (!cursorParallax.isNeededPermissionOfDeviceOrientationEvent()) {
  elm_requestButton.style.display = 'none';
}
// For ios since v12
elm_requestButton.addEventListener('click', event => {
    cursorParallax.requestPermissionOfDeviceOrientationEvent();
  });

API

• stop: Stop temporarily
• start: Restart from stopped state
• resetEvent: Rebind all events
• destroy: Unbind all events
• isNeededPermissionOfDeviceOrientationEvent: Whether permission for DeviceOrientationEvent is required
• requestPermissionOfDeviceOrientationEvent: Request permission to use deviceOrientationEvent

For npm

npm install cursor-parallax

var cursorParallax = new (require('cursor-parallax'))(elm, {options...});

Development

Setting up

npm install

Convert the ES6 code into valid ES5 combining, and put dist/cursor-parallax.js

npm run build

License

The MIT License (MIT) Copyright (c) 2016-2019 yoshi3.