Class bRando

Constructs a background changer and accepts an Options object. A usage example can be found in the readme.

Remarks

First Background

Creating 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
Copy

This will cause the background changer to load with one of the values set by the backgrounds option.

Returns the CSS selector used when selecting elements for a background changer. e.g. "main"

Returns an array of the background values set for a background changer. e.g. ["red", "green", "blue"]

Sets an array of CSS backgrounds to be used. e.g. ["red","green","blue"]

Default Value

An array of demo values

Returns the index of the background currently being displayed from the backgrounds array. Returns -1 if none of the backgrounds are being displayed.

Returns a NodeList containing every element selected for a background changer.

Returns whether a background changer will randomly (true) or sequentially (false) pick the next background value.

Sets whether to pick the next background value at random (true) or sequentially (false).

Default Value

true

Returns the set time between background changes (in milliseconds). e.g. 5000

Sets the time between background changes (in milliseconds). e.g. 5000

Remarks

Timing Values

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
Copy

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.

Default Value

7500

Returns the CSS transition (without a transition-property) used when changing between backgrounds. e.g. "500ms ease-in" or "0.5s ease-in-out 0.25s"

Sets the CSS transition (without a transition-property) used when changing between backgrounds. e.g. "500ms ease-in" or "0.5s ease-in-out 0.25s"

Remarks

Timing Values

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
Copy

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.

Default Value

"5000ms"

Returns whether a background changer has been removed.

Example

bgChanger.remove(); // changer was told to remove itself
bgChanger.isRemoved(); // returns true
Copy

Returns whether a background changer is playing.

Example

bgChanger.play(); // changer was told to play
bgChanger.isRunning(); // returns true
Copy

Advances a background changer to the next background in the sequence or at random, depending on the value of random.

Example

bgChanger.next();
Copy

Pauses a background changer on the current background. Calling this will not pause any transition animations.

Example

bgChanger.pause();
Copy

Plays a background changer. This is automatically called when a new background changer is constructed.

Example

bgChanger.pause(); // changer was paused
bgChanger.play(); // resume changer
Copy

Removes a background changer from the DOM and restores the selected elements to their state before background changes were made.

Example

const bgChanger = new bRando(options); // changer created for <body>
bgChanger.remove(); // remove changer from the DOM and <body>
Copy