jQuery Plugin for Stunning Animated Backgrounds - Bubble.js

File Size: 51.1 KB
Views Total: 1570
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 */
  width: 100%;
  height: 100vh;

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

  // custom shadows

4. Enable/disable background images & prebuilt bubbles.

  imgs: false, 
  bubbles: false,

5. Create a colorful gradient background for the canvas.

  background: {
    0: '#000',
    1: '#FFF' 

6. More configurations.

  namespace: 'bubble_', 
  animate: true, // enable animation
  imgSize: {
  shadowBlur: 1, 
  granularity: 0.01, 
  globalCompositeOperationBackground: 'source-over', 
  globalCompositeOperationObject: 'source-over', 
  bubbleFunc: false, 
  radiusFunc: false, 
  angleFunc: false, 
  velocityFunc: false, 



  • performance improvement

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