Bubble Bounce Animation In JavaScript - jquery.bubble.js

A small jQuery plugin to simulate a Bubble Machine that randomly generates bubbles with gravity (free fall) and bounce effects on the page.

How to use it:

1. Insert the required JavaScript and CSS files into the page.

<link rel="stylesheet" href="/path/to/css/jquery.bubble.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jquery.bubble.min.js"></script>

2. Create a container in which you want to generate bubbles.

<div id="example" class="bubble-wrap">
  
</div>

3. Initialize the plugin to start the animation.

$('#example').bubble({
  // options here
});

4. Override the styles of the bubbles.

.bubble-wrap .bubbles {
  border-radius: 50%;
  -webkit-box-shadow: 0 0 15px 0 rgba(255, 255, 255, .3) inset;
  box-shadow: 0 0 15px 0 rgba(255, 255, 255, .3) inset;
}

.bubble-wrap .bubbles:after {
  position: absolute;
  left: 50%;
  top: 20%;
  margin-left: -15%;
  content: '';
  width: 15%;
  height: 15%;
  background-color: rgba(255, 255, 255, .2);
  border-radius: 50%;
  box-shadow: 0 0 5px 0 rgba(255, 255, 255, .3);
}

5. Initialize the plugin to start the animation.

$('#example').bubble({
  // options here
});

6. Set the size & 'blowTime' range of the bubbles.

$('#example').bubble({
  size: [60, 120],
  blowTime: [0.5, 1],
});

7. Set the direction of the bubbles.

$('#example').bubble({
  direction: 'left', // or 'right'
  offset: [0, 60]
});

8. Set the time interval between bubbles.

$('#example').bubble({
  interval: 1.2 // 1.2s
});

9. Stop the animation after x seconds.

$('#example').bubble({
  autoStop: 0 // infinity
});

10. Customize the CSS classname of the bubbles.

$('#example').bubble({
  itemClass: 'J_BubbleItem'
});

---

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