A Small JavaScript Animated Bubble Background

Bubble-bg is a small JavaScript animated background with a canvas. Powered by HTML5 canvas element and without the need for any images.

how to create a bubble in html, css bubble background, javascript bubble animation, css bubble animation, bubble animation in website, bubble background generator

Features

4 gradient colors
bubbles
Smoothly transitions
Detects mobile devices and tries to use fewer resources
Pure JavaScript, no dependencies

jQuery Plugin For Fullscreen Background Video And Images | BigVideo.js

How to make use of it:

1. Load the base JavaScript file background.js into the document.

<script async src="background.js"></script>

2. Create an HTML5 panel element like this:

<canvas id="background"></canvas>

3. Make the panel full screen and act as wallpaper.

#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
}

4. All options are possible with default values.

{
  resolution: 1,
  gradient:
  {
    resolution: 4,
    smallRadius: 0,
    hue:
    {
      min: 0,
      max: 360
    },
    saturation:
    {
      min: 40,
      max: 80
    },
    lightness:
    {
      min: 25,
      max: 35
    }
  },
  bokeh:
  {
    count: 30,
    size:
    {
      min: 0.1,
      max: 0.3
    },
    alpha:
    {
      min: 0.05,
      max: 0.4
    },
    jitter:
    {
      x: 0.3,
      y: 0.3
    }
  },
  speed:
  {
    min: 0.0001,
    max: 0.001
  },
  debug:
  {
    strokeBokeh: false,
    showFps: false
  }
};

Create Amazing Bubbles Background, bubble-bg Plugin/Github, water bubble animation css