SimpleParallax.js

A Simple and light Parallax library

Live demo: http://alexprut.github.io/SimpleParallax.js

Installation

• Bower:
  Run from your console/terminal bower install simpleparallax.js --save
• From Source:
  Run git 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.