bubble bounce animation - Free Download Bubble Bounce Animation In JavaScript - jquery.bubble.js

Free Download Bubble Bounce Animation In JavaScript – jquery.bubble.js

By Posted on

This time I will share jQuery Plugin and tutorial about Bubble Bounce Animation In JavaScript – jquery.bubble.js, hope it will help you in programming stack.

bubble bounce animation - Free Download Bubble Bounce Animation In JavaScript - jquery.bubble.js
File Size: 7.32 KB
Views Total: 253
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

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

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

view source
1 <div id="example" class="bubble-wrap">
2    
3 </div>

3. Initialize the plugin to start the animation.

view source
1 $('#example').bubble({
2   // options here
3 });

4. Override the styles of the bubbles.

view source
01 .bubble-wrap .bubbles {
02   border-radius: 50%;
03   -webkit-box-shadow: 0 0 15px 0 rgba(255, 255, 255, .3) inset;
04   box-shadow: 0 0 15px 0 rgba(255, 255, 255, .3) inset;
05 }
06  
07 .bubble-wrap .bubbles:after {
08   position: absolute;
09   left: 50%;
10   top: 20%;
11   margin-left: -15%;
12   content: '';
13   width: 15%;
14   height: 15%;
15   background-color: rgba(255, 255, 255, .2);
16   border-radius: 50%;
17   box-shadow: 0 0 5px 0 rgba(255, 255, 255, .3);
18 }

5. Initialize the plugin to start the animation.

view source
1 $('#example').bubble({
2   // options here
3 });

6. Set the size & ‘blowTime’ range of the bubbles.

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

7. Set the direction of the bubbles.

view source
1 $('#example').bubble({
2   direction: 'left', // or 'right'
3   offset: [0, 60]
4 });

8. Set the time interval between bubbles.

view source
1 $('#example').bubble({
2   interval: 1.2 // 1.2s
3 });

9. Stop the animation after x seconds.

view source
1 $('#example').bubble({
2   autoStop: 0 // infinity
3 });

10. Customize the CSS classname of the bubbles.

view source
1 $('#example').bubble({
2   itemClass: 'J_BubbleItem'
3 });

Related posts: