Highly Customizable jQuery Parallax Scrolling Plugin - PRI-Parallax

PRI-Parallax is a jQuery plugin that makes it easy to implement the familiar Parallax scrolling effect on background images with lots of customization options.

Basic usage:

1. Download and include the core JavaScript file jquery.priparallax.min.js after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="dist/jquery.priparallax.min.js"></script>

2. Add a background image to the page section where you want to apply the parallax scrolling effect to.

<div id="section">
  ...
</div>

#section {
  background-image: url('bg.jpg');
  background-size:  150% auto !important;
  overflow: hidden;
  position: relative;
}

3. Active the background parallax scrolling effect on the page section.

("#section").priparallax();

4. Options and defaults.

("#section").priparallax({

  // trigger element
  trigger         : "", 

  // postion options
  top            : "0", 
  bottom         : "0",
  elementTop     : "100%",
  elementBottom  : "0",
  precision      : "0",

  // enable the plugin on mobile
  mobile         : false,

  // delay time
  wait           : "100",

  // animation duration
  duration       : "300",

  /*
  {
    0 : {
      "backgroundPosition": ["0%", "50%"],
    },
    100 : {
      "backgroundPosition": ["50%", "0%"],
    }
  }
  */
  animation      : {}

});

Change log:

2016-01-30

• v1.0.0

2015-12-15

• Minor changes

2015-12-10

• fixed demo link

---

This awesome jQuery plugin is developed by devpri. For more Advanced Usages, please check the demo page or visit the official website.