jQuery Plugin for Stunning Animated Backgrounds - Bubble.js

Bubble.js is a lightweight yet fully customizable jQuery animated background plugin that makes bubbles or custom images float and move seamlessly within a specified container.

How to use it:

1. Download and load the jquery.bubble.js plugin.

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

2. Create a container to hold the animated background.

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

/* Example CSS */
.bubble{
  width: 100%;
  height: 100vh;
}

3. Initialize the plugin and define an array of images to be animated in the background.

$('body').bubble({
  img:[
    './img/pink.png', 
    './img/yellow.png', 
    './img/green.png' 
  ], 
  // custom shadows
  shadowColor:[
    '#8bcecb', 
    '#f2a2b9', 
    '#f4b6d1', 
    '#ca98c3', 
    '#fff231', 
    '#4ab7d0' 
  ],
})

4. Enable/disable background images & prebuilt bubbles.

$('body').bubble({
  imgs: false, 
  bubbles: false,
})

5. Create a colorful gradient background for the canvas.

$('body').bubble({
  background: {
    0: '#000',
    1: '#FFF' 
  }, 
})

6. More configurations.

$('body').bubble({
  namespace: 'bubble_', 
  animate: true, // enable animation
  imgSize: {
    min:30, 
    max:80 
  }, 
  shadowBlur: 1, 
  granularity: 0.01, 
  globalCompositeOperationBackground: 'source-over', 
  globalCompositeOperationObject: 'source-over', 
  bubbleFunc: false, 
  radiusFunc: false, 
  angleFunc: false, 
  velocityFunc: false, 
};)

Changelog:

2023-04-02

• performance improvement

---

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