Since our MooTools class worked well on many projects we went ahead and rewritten it for jQuery (after all it’s a jQuery world out there).
The idea as well as functionality remains pretty much the same: we need to use as many (probably background) images as we want no matter how heavy they are, while minimizing their influence on load times.
Here are the basic requirements:
- Only the first image has to be loaded, the rest must “wait for their turn” and load as needed.
- The image has to be preloaded and only shown after the load is completed. We now use fade effect for every image including the first one.
- Support for responsive full screen background feature without breaking the image’s proportions on any screen/window size.
- It has to be lightweight and play well with other front end features.
So here is the jQuery version:
- Demo fixed size
- Demo full screen
- Demo with navigation links
- Download the latest version of the package with example pictures and working demos
- Download a specific version of the package
- Visit GitHub repository
No need to pass the full screen option any more, for jQuery version of this plugin it is handled entirely by the CSS – again if you want the full screen feature to work, download the whole package and take a look at our bare bones style.css. The CSS part is based on Perfect Full Page Background Image / CSS-Only Technique #2 from css-tricks.
Images used in this demo are copyrighted and only intended for this demo.
Further information, usage and options: Continue reading