How to Create Colored Bubbles as Web Page Background? | Web Animation
bubbled animation image

How to Create Colored Bubbles as Web Page Background? | Web Animation

Colored Bubbles: In this lesson we will create a colored bubbles as a background for a website. We will use Particles.js library to facilitate the a huge part of works.

This lesson will follow the following order:

  • Download and extract Particles.js library.
  • Create the custom JavaScript file and HTML.
  • Link the files that we will need.
  • Add our custom code.

Lesson 05

Here is a Video for this Lesson for More Info:

https://youtu.be/rA5gdAspaM8

Download and extract Particles.js library:

First of all we need to download Particles.js library from the following link https://github.com/VincentGarreau/particles.js.git. After downloading this package we will need to extract it and copy the “particles.js” file into our coding place.

Create the custom JavaScript file and HTML:

In the same place where we have copied the Particles.js file, we will create JavaScript file and name it “CustomBubbles.js” this file is now empty.

Then we will create an HTML file and name it “Bubbles.html” this file will contain the linking of both JavaScript files and also the ID that we will need it for the custom code.

Link the files that we will need:

Now we need to link the HTML file with the JavaScript files, so the code will be like the following:

<script src="particles.js"></script>
<script src="CustomBubbles.js"></script>

Also we will need to create an ID that will connect between the HTML and the “Particles.js” file, the HTML ID will be like the following:

<div id="BubbleID"></div>

The HTML code will be like the following:

<body>
<div id="BubbleID"></div>

<script src="particles.js"></script>
<script src="CustomBubbles.js"></script>
</body>

Add our custom code:

Now as a final step we will need to add our custom code to the ” CustomBubbles.js” file. The code will be like the following:

particlesJS("BubbleID",
    {
        "particles": {
            "number": {
                "value": 50
            },
            "color": {
                "value": ['#fff', '#443366','#ff9382','#22ff99','#3388ff','#000' ]
            },
            "opacity": {
                "value": 0.8,
                "random": true,
                "anim": {
                    "enable": true,
                    "speed": 2,
                    "opacity_min": 0.3,
                    "sync": false
                }
            },

            "shape": {
                "type": "circle",
                "stroke": {
                    "width": 0.5,
                    "color": '#fff'
                }

            },
            "size": {
                "value": 60,
                "random": true
            },
            "line_linked": {
                "enable": false
            },
            "move": {
                "enable": true,
                "speed": 3,
                "direction": "none",
                "straight": false
            }
        },
        "interactivity": {

            "modes": {
                "push": {
                    "particles_nb": 12
                }
            },
            "move": {
                "enable": true,
                "speed": 20,
                "random": true,
                "direction": "bottom",
                "bounce": true,
                "out_mode": "out",
                "attract": {
                    "enable": true,
                    "rotateX": 10,
                    "rotateY": 10
                }
            },
            "detect_on": "canvas",
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "repulse"
                },
                "onclick": {
                    "enable": true,
                    "mode": "push"
                },
                "resize": true
            }

        }
    }
);

In this part of the previous code we have changed the default number to 50 means 50 bubbles. Also we changed the color to multi colors as an array which is this [‘#fff’, ‘#443366′,’#ff9382′,’#22ff99′,’#3388ff’,’#000′ ].

 "particles": {
            "number": {
                "value": 50
            },
            "color": {
                "value": ['#fff', '#443366','#ff9382','#22ff99','#3388ff','#000' ]
            },

Then we have changed the opacity of the bubbles to value: 0.8 and the changing is randomly, means the opacity will change between the 0.8 and the opacity_min value which is 0.3 and the speed is 2 means slow.

 "opacity": {
                "value": 0.8,
                "random": true,
                "anim": {
                    "enable": true,
                    "speed": 2,
                    "opacity_min": 0.3,
                    "sync": false
                }
            },

Then we changed the shape to circle with stroke width 0.5 and the color of this circle is white with hex #fff.

 "shape": {
                "type": "circle",
                "stroke": {
                    "width": 0.5,
                    "color": '#fff'
                }

After that we changed the size of these bubbles to 60 and the change is randomly.

 "size": {
                "value": 60,
                "random": true
            },

Here we changed the linked to be disabled. And the movement to be enabled and move randomly with speed 3.

 "line_linked": {
                "enable": false
            },
            "move": {
                "enable": true,
                "speed": 3,
                "direction": "none",
                "straight": false
            }

Finally we changed the events we have to when we click we increase the bubbles with 12. And when mouse hover to remove the element from the path of the mouse which is repulse.

 "interactivity": {

            "modes": {
                "push": {
                    "particles_nb": 12
                }
            },
            "move": {
                "enable": true,
                "speed": 20,
                "random": true,
                "direction": "bottom",
                "bounce": true,
                "out_mode": "out",
                "attract": {
                    "enable": true,
                    "rotateX": 10,
                    "rotateY": 10
                }
            },
            "detect_on": "canvas",
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "repulse"
                },
                "onclick": {
                    "enable": true,
                    "mode": "push"
                },
                "resize": true
            }

Note: Our Example in the video or here is created with a background image that you could download from the following link: https://www.freepik.com/free-vector/mountains-landscape-background-with-trees_5241191.htm#page=1&query=sky&position=29. And the HTML code will be changed to the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        padding: 0;
        margin: 0;
    }
    #BubbleID{
        background-image: url("2760925.jpg");
        background-size: 100% 110%;
    }
</style>
<body>
<div id="BubbleID"></div>

<script src="particles.js"></script>
<script src="CustomBubbles.js"></script>
</body>
</html>

We added only the style code.

Your Could Download the code from this button:

Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967778283416

This Post Has One Comment

Leave a Reply