bubbly-bg - animation in which bubble moves in background

Unlike magazines and newspapers, the web is attractive to move dynamically. Furthermore, unlike television, display can be changed by user's operation. Not only video sites but also ordinary Web sites can be done.

Bubbly-bg took advantage of such features. Bubbles are displayed on the background and animated.

How to use bubbly-bg

blue.

Reddish brown.

purple.

Salmon.

Execute bubbly-bg with the following function. There are various options, but it moves even if not specified. If you change the function (algorithm) the motion also changes.

bubbly({
animate: false, // default is true
blur: 1, // default is 4
bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
bubbles: 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);
canvas: document.querySelector("#background"), // default is created and attached
colorStart: "#4c004c", // default is blue-ish
colorStop: "#1a001a",// default is blue-ish
compose: "lighter", // default is "lighter"
shadowColor: "#0ff", // default is #fff
});

Using bubbly-bg, you can provide content with a smooth background. In addition, you can change the color and movement if you choose. It seems to be content like web.

bubbly-bg is JavaScript open source software (Apache Licnese 2.0).

Demo

tipsy/bubbly-bg: Beautiful bubbly backgrounds in less than 1kB (696 bytes gzipped)