Author: | eugeniosegala |
---|---|
Views Total: | 10,051 views |
Official Page: | Go to website |
Last Update: | October 11, 2018 |
License: | MIT |
Preview:

Description:
easy_background is a vanilla JavaScript library to create a responsive, automatic, dynamic background slideshow from an array of images.
How to use it:
Download and insert the JavaScript file easy_background.js
into the document.
<script src="easy_background.js"></script>
Initialize the background slideshow and pass the following parameters to the easy_background()
function.
- selector: where to place the background slideshow.
- a1, b1, c1, d1, e1: transition delay in milliseconds.
- a2, b2, c2, d2, e2: image paths.
// easy_background(selector, a1, a2, b1, b2, c1, c2, d1, d2, e1, e2) easy_background("body", 3000, "1.jpg", 3000, "2.jpg", 3000, "3.jpg", 3000, "4.jpg", 3000, "5.jpg");
Add a smooth transition effect to the background slideshow using CSS3.
body { -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; background-size: cover; background-repeat: no-repeat; background-position: center center; color: white; height: 100%; width: 100%; }
Changelog:
10/11/2018
- Added transition duration
Hi!
Please update the article 🙂 The new version is more powerful! Thanks!
Bye!