SimpleParallax.js
A Simple and light Parallax library
Live demo: http://alexprut.github.io/SimpleParallax.js
Installation
- Bower:
Run from your console/terminalbower install simpleparallax.js --save - From Source:
Rungit clone https://github.com/alexprut/SimpleParallax.js.git - Direct download:
Download the last version from here
Usage
<link rel="stylesheet" href="css/simpleParallax.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/simpleParallax.min.js"></script> <div class="parallax" data-parallax-axis="both" data-parallax-scope="global" data-parallax-detect="mouseover"> <div class="parallax__item" data-parallax-depth="35"> example </div> <div class="parallax__item" data-parallax-depth="10"> example </div> </div>For a complete example see index.html
Parameters
| Data Attribute | Type | Description | Default |
|---|---|---|---|
data-parallax-scope | ['global'] | the scope/region covered by the parallax effect | 'global' |
data-parallax-axis | ['both'] | the direction affected by the parallax effect | 'both' |
data-parallax-detect | ['mouseover'] | the event that triggers the effect | 'mouseover' |
data-parallax-max-shift | int | maximum shift in both directions of the elements | 1000 |
parallax-depth | int | the depth of a item | 1 |
parallax-offset-x | int | the offset of a item in pixels along the x axis | 0 |
parallax-offset-y | int | the offset of a item in pixels along the y axis | 0 |
License
SimpleParallax.js is licensed under the MIT License – see the LICENSE file for details.
