jQuery Plugin For Background Image Parallax Scrolling Effects
File Size: | 5.23 MB |
---|---|
Views Total: | 2217 |
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.