Distributed under the MIT License.
Found a 🐛? Create a new issue.
- Published to NPM 🥳
- Added CDN instructions to README
- Added a gradient to the demo and README
- Added support for the CSS background property https://developer.mozilla.org/en-US/docs/Web/CSS/background
- Added To-Do list
Include a copy of bRando.js via one of the following methods.
If you do not want to download bRando.js, include the following code right before the closing
Otherwise, download the
bRando-0.1.3.min.js file or clone this repository, and include the following code right before the closing
Create a background randomizer
Then create an array of backgrounds to be used (they can include images, colors, and/or gradients):
// Our array of backgrounds to usevar backgrounds ="url('')" // we can use images"url('')""url('')""#000" // we can use colors"linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)" // we can use gradients;
See documentation section for more information on background options.
Next, we create a background randomizer and save it to a variable called
// Create a new background randomizervar backgroundRandomizer = bRando;
The new randomizer will automatically begin playing.
Change the background(s)
We can manually move to the next background:
backgroundRandomizernext; // Move to the next background
Remove the background randomizer
When we are done with it, we can remove the randomizer from the
backgroundRandomizer; // Remove background randomizer
This will revert the background settings on all selected elements to the state they were before we changed them.
Create a background randomizer
Background randomizers are created using the bRando.new() method and are attached to select HTML elements by passing a DOM selector string argument.
// Create a new background randomizerbRando;
bRando.new() returns the created background randomizer object and automatically plays it. If no elements were found using the selector string, the function returns error code
If the selector string was already used to create a randomizer, the old randomizer will be removed before creating a new one.
background_array may contain any combination of CSS background properties including images, colors, and gradients. See https://developer.mozilla.org/en-US/docs/Web/CSS/background. For example:
// mixed background typesvar backgrounds ="url('')" // image url"fixed url('') center no-repeat" // image url with other background properties"#ff00ff" // magenta background color in hex code"linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)" // horizontal blue linear gradient"rgb(219, 125, 0)" // orange background color in rgb form"rgba(131, 92, 59, 1.0)" // brown background color in rgba form"#ff0000f0" // red background color in hex code with alpha code;
Creating too many randomizers will consume large amounts of CPU power—particularly while backgrounds are transitioning.
If multiple randomizers are attached to an html element the background change intervals will be unpredictable.
For example:// Selects all <div> elements with the class of "stuff"var r1 = bRando;// Selects all <div> elements including the ones// already selected for the above background randomizervar r2 = bRando;
If for some reason this is done, make sure to remove the randomizers in reverse order:r2; // Remove the second randomizer firstr1; // Then remove the first randomizer
This way the elements will be properly reverted to the state they were in before the randomizers modified them.
Start the demo background randomizer
If no arguments are passed to
bRando.new() it will create and return a demo randomizer acting on the
bRando; // Use the demo background randomizer which acts on <html>
Check it out on the demo page.
Manually move to the next background
r1next; // Manually move the background randomizer, r1, to the next background
If the randomizer is currently performing a transition animation, the function will return error code
1 indicating it is already going to the next background. If the randomly chosen background is an image which has not yet preloaded, the function with return error code
2. Otherwise, the function will return
0 indicative of a successful background change.
Manually move all background randomizers to their next background
bRando; // Manually move all background randomizers to their next background
0 if it successfully moved all randomizers to their next background. Otherwise, the function returns the number of randomizers that failed to change.
Pause a background randomizer
r1; // Pause the background randomizer, r1
0 if the randomizer is successfully paused. Otherwise, the functions returns
1 to indicate that the randomizer is already paused.
Pause all background randomizers
bRando; // Pause all background randomizers
0 if all the randomizers successfully paused. Otherwise, the function returns the number of randomizers which are already paused.
Play background randomizer
r1; // Play the background randomizer, r1, if it is currently paused
0 if the randomizer was successfully played. Otherwise, the function returns
1 if the randomizer is already playing.
Play all background randomizers
bRando; // Play all background randomizers that are paused
0 if all the randomizers successfully played. Otherwise, the function returns the number of randomizers which are already playing.
Remove a background randomizer
r1; // Remove the background randomizer, r1
This removes the randomizer and reverts the background settings on the selected element(s). Returns
0 for successful removal.
Remove all background randomizers
bRando; // Remove all background randomizers
This removes all randomizers and reverts the background settings on the selected element(s). Returns
0 for successful removal.