jQuery Plugin For Background Image Parallax Scrolling Effects

jQuery Plugin For Background Image Parallax Scrolling Effects
File Size: 5.23 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.