How to Make a Raining Background with HTML and JavaScript
Raingy Background image

How to Make a Raining Background with HTML and JavaScript

Raining Background with HTML and JS, in this tutorial we will learn how to create a Raining background with particles.js library. Which is used to control particles in web design.

we will explain the following:

  • Downloading Particles.js Library.
  • Downloading the water drop image.
  • Create Custom JavaScript File.
  • Add Our custom code and changes.

Lesson 03

Here is a Video for Making a Raining Background:

https://youtu.be/TvghI6_s0yE

Downloading Particles.js Library:

First we will need to down load the particles.js library from the following link: https://github.com/VincentGarreau/particles.js.git. After downloading the package we will extract that library and take the particles.js file inside that folder.

Downloading the water drop image:

After downloading the package and coping the particle.js file we need to download the water drop image from https://www.freepik.com/ go and search for water drop and you will get many image download the one. which will looks like the following:

water drop image
water drop image

Create Custom JavaScript File:

Now we will create the JS file and name it as “CustomRainy.js” inside this file we will add the custom code we have.

Then we should link the “particles.js” file and this file with the html file:

The code:

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

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

Add Our custom code and changes:

Finally we will add our custom code that will be like the following:

particlesJS("RainyBackground",
{
    "particles": {
        "number": {
            "value": 100
        },
        "shape": {
            "type": "image",
            "image": {
                "src": "drop2.png",
                "width": 1,
                "height": 1
            }
        },
        "size": {
            "value": 7,
            "random": true
        },
        "line_linked": {
            "enable": false
        },
        "move": {
            "enable": true,
            "speed": 30,
            "direction": "bottom-left",
            "straight": true
        }
    },
    "interactivity": {
        "detect_on": "canvas",
        "events": {
            "onhover": {
                "enable": false
            }
        },
        "modes": {
            "push": {
                "particles_nb": 12
            }
        }
    }
}
    );

This code means we have function with name “particlesJS”. This function have tow parameters the first is the id which is “RainyBackground” which we should create it in the HTML file. And the second is the array which is holding the values we need to change.

These values are like the following:

Number of particles is 100 piece

"number": {
            "value": 100
        },

The type is image not shape like previous lesson Snow Fall Background so we should add the image path which is src: image path. Then we could control the width and the height of the image.

 "shape": {
            "type": "image",
            "image": {
                "src": "drop2.png",
                "width": 1,
                "height": 1
            }
        },

After that we added the size value and the randomness of the particles size to look like they are not near to the screen.

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

Then the particles linked is false means that the water drops will not be like they are linked with each other with lines.

  "line_linked": {
            "enable": false
        },

And then we controlled the movement of these water drops to be moving with speed equal 30 and the direction of the movement is from bottom to left. And in the same direction from the top right to the bottom left straight ahead.

"move": {
            "enable": true,
            "speed": 30,
            "direction": "bottom-left",
            "straight": true
        }

Finally we canceled the “onhover” event with false value. And the mode of on click is push means add particles when click, and add 12 particles when click “particles_nb”:12.

 "events": {
            "onhover": {
                "enable": false
            }
        },
        "modes": {
            "push": {
                "particles_nb": 12
            }
        }

The HTML file contains the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #RainyBackground{
        background-image: url("bbb.png");
        background-size: 100% 100%;
    }
</style>
<body>
<div id="RainyBackground"></div>

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

Note: You should change the background to any color or image except the white color because the default color is white.

You could get the code from:



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:967772223681

Leave a Reply