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
To see it in action, download this repository and open
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).