jQuery Plugin for Stunning Animated Backgrounds - Bubble.js
File Size: | 51.1 KB |
---|---|
Views Total: | 388 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.