jQuery Plugin For Crossfading Images As You Scroll Down - Crossfade.js

Crossfade.js is a tiny JQuery script that crossfades (blurs) background images when they are scrolled out of view. Based on Html5 canvas element.

How to use it:

1. Include the jQuery javascript library and crossfade.js in the Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="src/crossfade.jquery.js"></script> 

2. Create an DOM element and set the start and end background images via data-* attributes.

<div class="demo" data-crossfade-start="demo/01.jpg" data-crossfade-end="demo/01-blur.jpg">
</div>

3. Initialize the plugin. That's it.

$('.demo').crossfade();

4. Default options.

$('.demo').crossfade({
// Determines the positioning of the background images. 
// This option functions similarly to CSS background-size.
backgroundPosition: 'center center',

// A number between 0 and 1 that determines how quickly the 
// crossfade occurs as the element scrolls off-screen
threshold: 0.5,

// trigger the crossfade before getting to the top of the target object
offset: 0
});

Change logs:

2015-05-06

• Added option for extra offset, making it possible to trigger the crossfade before getting to the top of the target object. 
• Reintroducing PR because previous PR had eliminated trailing whitespaces, making the diff hell to look at.

v3.6.2 (2014-06-10)

• Fixed annoying bug with canvas not resizing properly

---

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