🎨Backdrop

Backdrop is a simple JavaScript module to preload an image and gracefully apply it as the background of a node in the page. There are three parameters in the object's constructor configuration, although only the first is required:

node
the query selector for the element (or a reference to the element itself) whose background should be applied
src | srcset
the path to the image that should be applied as the background image
id (optional)
the id to apply the element (defaults to `backdrop` if none provided)
styles (optional)
object containing the background property names (ex: position, repeat, size) and the respective values that should be applied to the backdrop

Three custom events are fired:

start
fired when the image is loaded and the transition is about to begin
end
fired when the transition is complete
error
fired if an image can’t be loaded

An example implementation follows:

var dropper = new Backdrop({});
drop.on('end', function(url) { window.console.log('dropped', url); });
dropper.drop({srcset: 'https://path/to/image.jpg'});

Backdrop by READMEANSRUN