motion-parallax

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 = require('motion-parallax'); 

Or download parallax.min.js file and include in you document:

<script src="/path/to/parallax.min.js"></script>

Getting Started

<div class="parallax">
  <div class="box"></div>
  <div class="box"></div>
</div>

const parallax = new Parallax('.box'); // className or other selector

Usage

new Parallax('className_or_other_selector', [config]);

Options can via data attributes setting:

<div class="parallax">
    <div class="box" data-xrange="20" data-yrange="10"></div>
    <div class="box" data-xrange="10" data-yrange="20"></div>
</div>

all config:

{
    xRange: 20, // Use attribute on priority
    yRange: 20,
    listenElement: window,
    animate: false,
    invert: false,
    enterCallback: function() {},
    leaveCallback: function() {}
}

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: when xRange, yRange is greater than 80 or more, you can consider opening this option.
• invert: reverse direction movement.
• enterCallback: mouse enter listenElement will callback this funciton.
• leaveCallback: mouse leave listenElement will callback this funciton.

API

include add,remove,refresh.

add

Add a new animation element.

parallax.add(element, [config])

const parallax = new Parallax('.box');
parallax.add('.other');
parallax.add('.three');
parallax.refresh();

remove

This api can remove alreay animate element, but you need manual call refresh api make the operation effective.

const parallax = new Parallax('.box');
parallax.add('.other');
parallax.add('.three');
parallax.refresh();
 
// then you don't need className other, you can
parallax.remove('other').refresh();

refresh

const parallax = new Parallax('.box');
parallax.add('.other');
parallax.add('.three');
parallax.refresh();
 
// then you don't need className other and three, you can
parallax.remove('other');
parallax.remove('other');
parallax.refresh();

Support chain operation

const parallax = new Parallax('.box');
parallax
  .add('.other')
  .add('.three')
  .refresh();

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