🎨 JavaScript module that creates a backdrop for your webpage
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
.gitignore
README.md
backdrop.js
index.html

README.md

A JavaScript module for smooth background image loading used on http://readmeansrun.com.

Events:

  • start: fired when a backdrop is about to be loaded
  • end: fired when a backdrop has been downloaded & applied to the page

View more here.

Example usage:

var dropper = new Backdrop({
  'id' : 'backdrop',
  'duration' : 0.5
});

dropper.on('start', function(e) {
  console.log('Backdrop loading: ' + e.details[0]); // src of backdrop image
});

dropper.on('end', function(e) {
  console.log('Backdrop applied: ' + e.details[0]); // src of backdrop image
});

dropper.drop({
  'url' : 'http://davidfmiller.github.io/assets/img/backdrop/koru.jpg',
  'styles' : { 'position' : 'left bottom', 'size' : 'cover'}
});

Free to use, please include a link to http://readmeansrun.com in your page's source.