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
Usage
HTML
<!-- set depth 0 ~ 1 --> <!-- something to contents --> <!-- something to contents --> <!-- something to contents --> Request permission of deviceOrientationEvent
JS
var elm = document;var cursorParallax = elm easing: 'ease-out' duration: '.6s' mousemoveRatio: 05 deviceorientationRatio: 1 mousemove: true deviceorientation: true isUsedTheFirstTilt: false // Whether to parallax with initial tilt as 0;var elm_requestButton = document;if !cursorParallax elm_requestButtonstyledisplay = 'none';// For ios since v12elm_requestButton;
API
stop
: Stop temporarilystart
: Restart from stopped stateresetEvent
: Rebind all eventsdestroy
: Unbind all eventsisNeededPermissionOfDeviceOrientationEvent
: Whether permission forDeviceOrientationEvent
is requiredrequestPermissionOfDeviceOrientationEvent
: Request permission to usedeviceOrientationEvent
For npm
npm install cursor-parallax
var cursorParallax = new elm options...;
Development
Setting up
npm install
dist/cursor-parallax.js
Convert the ES6 code into valid ES5 combining, and put npm run build
License
The MIT License (MIT) Copyright (c) 2016-2019 yoshi3.