Optional
options: OptionsCreating a background changer does not immediately change the background. Each selected element will first display whatever background is set by your CSS styles. Then, after the time set by the timeout option has elapsed, it will change the background.
If you would like the background changer to immediately load the first background, call next right after creation.
const bgChanger = bRando.create(options); // create a background changer
bgChanger.next(); // immediately change to one of the backgrounds
This will cause the background changer to load with one of the values set by the backgrounds option.
Never set the transition duration longer than the timeout.
// DO NOT SET transition > timeout
// Bad
const options = {
transition: "5000ms", // transition duration set to 5 seconds
timeout: 3000, // time between backgrounds set to 3 seconds
...
}
// Bad
bgChanger.transition = "5000ms"; // transition duration set to 5 seconds
bgChanger.timeout = 3000; // time between backgrounds set to 3 seconds
If it is longer, the transition to a new background will not complete before the next background is set, causing background changes to glitch past animations.
Generated using TypeDoc
A function for creating a background changer (bRando instance) in the web browser environment. It accepts an Options object. A usage example can be found in the readme.
Demo
Create a demo instance for testing or verifying correct installation by omitting the Options parameter.