🎨 A backdrop for your webpage
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
docs
src
.gitignore
Gruntfile.js
LICENSE.md
README.md
index.js
package-lock.json
package.json
webpack.config.js

README.md

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

See it in action here.

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 https://readmeansrun.com in your page's source.