Crossfade: Crossfading Images on Page Scroll

Crossfade is a tiny jQuery plugin for crossfading images on page scroll. The end result is a high-impact scroll feature that can add a lot of visual interest to a website design without slowing it down.

This plugin is super-small — only 3kb. You can install using Bower and then initialize.

There are a few technical things you might want to know about this plugin:

• It preloads the start and ending images.
• It generates a <canvas> element and appends it to the element. The canvas is automatically set to cover its parent, via absolute positioning.
• The starting and ending images are drawn into the <canvas> and, depending on the position of the element in the viewport, superimposed on top of one another.
• Images are redrawn using window.requestAnimationFrame, allowing for exceptionally performant rendering. Browsers that do not support window.requestAnimationFrame will fall back to a timeout loop.

On install, you have options to adjust the start and end points of the fading animation, threshold and speed of the fade and default background position of images as the plugin does its magic.