How to Make Snow Fall Background with JavaScript & CSS | Particles.js
Snow Fall Result

How to Make Snow Fall Background with JavaScript & CSS | Particles.js

lesson 02:

Particles.js is a Javascrip Library that controls the particles. In this lesson we will learn how to use Particles.js library to create snowing background for web design this lesson will help to add some features in your website. We will take the following in this tutorial:

We will take the following in this tutorial:

  • Get Particles.js.
  • Create custom JS file.
  • Add the specific codes we need.

This is a Video for More about Particles.js Snow Fall:

https://youtu.be/I-szGUvpp1k

Install Particles.js:

First of all we will download the particles.js library from this link:https://github.com/VincentGarreau/particles.js.git. Then we will extract that package in our coding place. After extracting the package we will need to take the particles.js file.

Create custom JS file:

Here we will create a normal empty JavaScript file, lets call it customSnowFall.js.

Tthen we will link the Particles,js file that we have taken from the package we download with html file. So the code of linking will be like the following:

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

and we will link also the custom file we have created, the code is like the following:

<script src="customSnowFall.js"></script>

After that we will create and ID in HTML <div> element lets assume it as “SnowFall”, the code:

<div id="SnowFall"></div>

Great now we will need to adjust the custom file code to match our need,

Add the specific codes we need:

Now we will add our custom code in the “customSnowFall.js” file, which will be like the following:.

particlesJS("SnowFall",
    {
        "particles": {
            "number": {
                "value": 80
            },
            "shape": {
                "type": "circle",
             },
            "size": {
                "value": 7,
                "random": true
            },
            "line_linked": {
                "enable": false
            },
            "move": {
                "enable": true,
                "speed": 5,
                "direction": "bottom",
                "straight": false
            }
        },
        "interactivity": {
            "detect_on": "canvas",
            "events": {
                "onhover": {
                    "enable": false
                }
            },
            "modes": {
                "push": {
                    "particles_nb": 12
                }
            }
        }
    }


);

In the previous code we have create a function which will overwrite the main function in the package JavaScript File which is “Particles,js”. The function name is “particlesJS()”.

This function have three parameter the first is the ID, the second is the parameter and the last is the call back.

In the first line of the previous code we added the id we have created in the HTML file,

The code:

particlesJS("SnowFall",

Then we added the parameters the parameters are divided to particles and interactivity,

First particles :

Here we have controlled the number of snow parts we will get: “number”: { “value”: 80}, then we changed the default shape to:

 "shape": {
            "type": "circle",
         },

and then we changed the size of that snow pieces as: “size”: { “value”: 7, “random”: true }. The size is 7 and they are random sized means some of them are small and the other are little larger.

Then we coded that the particles are not linked: “line_linked”: { “enable”: false },. So the particles will appear without links between them. After that we changed the movement as:

 "move": {
                "enable": true,
                "speed": 5,
                "direction": "bottom",
                "straight": false
            }

So the movement is enabled and the speed is slow which is 5, the movement direction is from bottom to top and it goes straightly from bottom to top.

Second interactivity:

We have changed the on hover action which is now disabled : “events”: { “onhover”: { “enable”: false } },

And the mode is push when we click we will push and add 12 particles of snow in the snow fall background the code: “modes”: { “push”: { “particles_nb”: 12 }

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

This Post Has 2 Comments

Leave a Reply