Author: | blake01 |
---|---|
Views Total: | 481 views |
Official Page: | Go to website |
Last Update: | October 13, 2015 |
License: | MIT |
Preview:

Description:
Backwall is a pure JavaScript library for responsive image solution that checkes the screen width and loads in the correct background image to reduce network traffic and increase page load speed.
Key features:
- Detect browser support for
background-size: cover
using Modernizr and provide an appropriate fallback, e.g. a solid color background - Detect the user’s screen size and pixel ratio, and serve up a medium- or high-resolution background image
- For users with slow connections, serve up a low-resolution background image while the higher-resolution image loads
- Smoothly fade in background images when fully loaded using CSS3 transitions when the browser supports them
Basic usage:
Load the needed modernizr.js and the backwall.js in the html document.
<script src="modernizr-custom.js"></script> <script src="backwall.standalone.min.js"></script>
Add a background image to your container that will act as the fallback background.
.container { background-image: url(bg.jpg); background-color: black; }
Initialize the Backwall and specify the image paths for different screen resolutions.
new Backwall({ imgLoRes: "bg-small.jpg", imgMidRes: "bg-medium.jpg", imgHiRes: "bg-full.jpg" });
More configuration options.
// The cutoff point at which backwall decides to load imgMidRes or imgHiRes hiResThreshPx: 1080, // The cross-fade transition time from 0% to 100% opacity when each image loads. // Will effectively be 0 on browsers that do not support CSS3 transitions. fadeTimeSecs: 0.5