Parallax
- Based on native JS, you do not need to install other dependencies.
- Focus on interaction, rather than just rolling parallax (not intended to support scrolling parallax, after all, GitHub has many plugins that have been implemented).
- Support mobile device.
Demo here(You can use mobile device open it.)
Installation
You can use npm:
npm install motion-parallax --save
and then in you js file:
const Parallax = ;
Or download parallax.min.js
file and include in you document:
Getting Started
const parallax = '.box'; // className or other selector
Usage
'className_or_other_selector' config;
Options can via data attributes setting:
all config:
xRange: 20 // Use attribute on priority yRange: 20 listenElement: window animate: false invert: false {} {}
The above values are all defaults.
xRange, yRange
: the movable distance of an element on the X and Y axis.listenElement
: the element that listens for the mouseover event(in Mobile device is window and you can't change it).animate
: whenxRange, yRange
is greater than 80 or more, you can consider opening this option.invert
: reverse direction movement.enterCallback
: mouse enterlistenElement
will callback this funciton.leaveCallback
: mouse leavelistenElement
will callback this funciton.
API
include add
,remove
,refresh
.
add
Add a new animation element.
parallax.add(element, [config])
const parallax = '.box';parallax;parallax;parallax;
remove
This api can remove alreay animate element, but you need manual call refresh
api make the operation effective.
const parallax = '.box';parallax;parallax;parallax; // then you don't need className other, you canparallax;
refresh
const parallax = '.box';parallax;parallax;parallax; // then you don't need className other and three, you canparallax;parallax;parallax;
Support chain operation
const parallax = '.box';parallax ;
Contributing
If you have a pull request you would like to submit, please ensure that you update the minified version of the library along with your code changes.This project uses gulp
.
# dev gulp # min file gulp min