jQuery Plugin For Background Image Parallax Scrolling Effects

Clove.js is an easy and customizable jQuery plugin used to add familiar Parallax scrolling effects to your backgrounds, with jQuery easing support.

Basic usage:

1. Load jQuery library and the jQuery clove.js script in your web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="lib/clove.js"></script>

2. Create an DIV element with a background image.

<div class="panel scroll" style="background-image: url('1.png')"></div>

3. Call the plugin on the DIV element and config the background parallax scrolling effect.

$(".scroll").clove({

  // lower bound for the range of css values
  min: 500,

  // upper bound for the range of css values
  max: 1500,

  // Horizonal background position when dynamically changing vertical offset
  initialX: 0,

  // Vertical background position when dynamically chaning horizonal offset
  initialY: 0,

  // unit for the CSS attribute (ex... 'px', '%', 'pt')
  offsetUnit: "px",

  // the CSS property to change based on the scroll position
  property: "background-position-y",

  // The css attribute should change when the element is offscreen
  scrollOffscreen: false,

  // function that scales the scroll position of the screen 
  // inside a given the min and max offset
  scaleFunction: scaleFunction,

  // determines if the elements CSS should be altered. 
  // Defaults to only update the element CSS if 
  // the element is currently displayed on the screen
  thresholdFunction: isWithinThreshold,

  // jQuery easing options. 
  // See: gsgd.co.uk/sandbox/jquery/easing
  easing: "linear"

});

---

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