Shulou(Shulou.com)06/02 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.