It is, isn't it? Here's how to use it.
$(function () {
$('.crossfade').crossfade(options);
});
Options
start | required The URL of the first (start) image. You can also define this property as a data-crossfade-start attribute on the element itself. |
---|---|
end | required The URL of the second (end) image. You can also define this property as a data-crossfade-end attribute on the element itself. |
threshold | Default: 0.5 A number between 0 and 1 that determines how quickly the crossfade occurs as the element scrolls off-screen |
backgroundPosition | Default: 'center center' Determines the positioning of the background images. This option functions similarly to CSS background-size. |
Technical Details
Under the hood, Crossfade.js does the following…
- Preloads the start and ending images
- Generates a
<canvas>
element and appends it to our 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 redraw using
window.requestAnimationFrame
, allowing for exceptionally performant rendering. Browsers that do not supportwindow.requestAnimationFrame
yet will fall back to a timeout loop.
Notes
Some things to keep in mind…
- The elements you initialize Crossfade.js on must be able to contain their children. Use CSS to set the position to “relative”, “absolute” or “static”, depending on your use case.
- Any content already inside the element you initialize Crossfade.js on will need to be set to “position: relative” to make sure it's visible above the injected
<canvas>
element.