Create Customizable Animated Bubble Background With jQuery - bubbles.js

bubbles.js is a jQuery plugin that adds customizable, animated, random bubbles to the background of a given container. It is fully responsive that auto update the bounds and restarts the animation when the page has been resized.

How to use it:

1. Load the main JavaScript file bubbles.js after you've loaded jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="bubbles.js"></script>

2. Create a container that bubbles will appear inside.

<div id="bubbleContainer">
  <div class="bubble"></div>
</div>

3. Style the bubbles whatever you like.

.bubble {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: rgba(255, 255, 255, .5);
}

4. Config the bubble background by overriding the following parameters:

// type this as you would in css: #id, .class, element
var insideNode = "#bubbleContainer";  

// the total amount of bubbles
var totalBubbles = 15;

// maximum time to move the bubbles
var maxTimeToMove = 1500;

// minimum time to move the bubbles
var minTimeToMove = 500;

---

This awesome jQuery plugin is developed by marchsabino. For more Advanced Usages, please check the demo page or visit the official website.