cursor-parallax
v1.3.3
Published
This is a simple parallax library that works with cursor and device orientation.
Downloads
19
Maintainers
Readme
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
<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 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 (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.