How to realize dynamic Bubble background effect bubbly-bg.js

This article shows you how to achieve the dynamic bubble background effect bubbly-bg.js, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

Bubbly-bg.js is a beautiful dynamic bubble background js plug-in. It is based on HTML5 canvas, the compressed version is smaller than 1kb, but it can produce a variety of beautiful dynamic bubble background effects, very powerful.

Use

The bubbly-bg.js dynamic Bubble background plug-in can be installed through npm.

Npm install bubbly-bg-save

You can introduce bubbly-bg.js files into your page.

HTML structure

If you do not specify an element as a container, but initialize the plug-in directly in body, the plug-in will create an element after body with position: fixed and z-index:-1 attributes, and its width and height will always be equal to the width and height of the viewport. For example:

... Bubbly ()

You can also specify a container that serves as a dynamic bubble background. For example:

Then initialize it by using the following method.

Bubbly ({canvas: document.getElementById ("demo")})

Configuration parameters

The available configuration parameters for the bubbly-bg.js dynamic Bubble background plug-in are:

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})

Example, yellow / pink with red / orange / yellow bubble effect:

Bubbly ({colorStart: "# fff4e6", colorStop: "# ffe9e4", blur: 1, compose: "source-over", bubbleFunc: () = > `hsla (${Math.random () * 50}, 100%, 50%, .3) `})

The above is how the dynamic bubble background effect bubbly-bg.js is implemented. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.