🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

SimpleParallax.js is a lightweight jQuery plugin that applies smooth, fast, interactive, requestAnimationFrame powered Parallax effects to absolute positioned elements when mouse moving.

parallax

Documentation

SimpleParallax.js

JavaScript Style Guide MIT

A Simple and light Parallax library

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

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.


You May Also Like