This is a JS script that creates a number of moving bubbles (1/45000 of the amount of pixels in the window by default) that mimics the animated wallapers introduced in iOS 7. The bubbles will run as long as the page is open, and individual bubbles will reset if they leave the bounds of the window.
##Screenshots
page.html in a web browser.
##How to add it to your own page
First, add the CSS file to your page by adding the following to the <head> element:
<link rel="stylesheet" href="movingbubbles.css" type="text/css" />Then, add the Javascript file to your page by adding the following to the <head> element:
<script src="movingbubbles.js" type="text/javascript"></script>##Supports
Any browser that supports opacity (for the fade-in of bubbles), hsla colors (for bubble backgrounds), border-radius (for round bubbles), and box-shadow (for the bubble glow) should be able to properly see this, so it should work on any modern browser and IE9+. This has has been tested to work on Firefox and Chrome.
##How to change colors
For the CSS background, if you wish to keep the background, you just need to change the colors in the background-color and background-image rules for the html and body elements in movingbubbles.css.
For the bubbles, first open page.html in a web browser and play around with the setting sliders (Firefox, Chrome, and IE11+ only). After finding a setting you like, change the respective value in the bubbleOptions variable in movingbubbles.js. You can change the hue, saturation, and brightness, as well as their random variances, the opacity and the minimum opacity, the tick speed, and the density. The only bubble setting that does not directly correspond to a variable in the bubbleOptions variable is the density. For the density, set the bubbleOptions.ratio variable to 120000 - (density * 1000).