Create Amazing Bubbles Background In Pure JavaScript – bubble-bg

Category: Animation , Javascript | May 9, 2017
Author: pbondoer
Views Total: 4,013
Official Page: Go to website
Last Update: May 9, 2017
License: MIT

Preview:

Create Amazing Bubbles Background In Pure JavaScript – bubble-bg

Description:

The bubble-bg JavaScript library let you create fantastic bubbles with gradient colors and smooth animations for the background. Powered by HTML5 canvas element and without the need of any images.

How to use it:

Load the core JavaScript file background.js in the document when needed.

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

Create an HTML5 canvas element as this:

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

Make the canvas fullscreen that acts like a background.

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

All possible options 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
  }
};

You Might Be Interested In:


Leave a Reply