Particles.js Introduction
Particles.js introduction image

Particles.js Introduction

In this Particles.js Introduction tutorial you will learn a JavaScript library that deals with particles, you could use this library to create and manipulate your web page particles.

In this Particles.js Introduction tutorial we will know the basic steps of using this library, we will learn how to:

  • Download Particles.js.
  • Install Particles,js.
  • Link Particles.js with HTML.

Here is the Video About “Particles.js Introduction” for More:

https://youtu.be/Ko2cHsF3-Ds

Download Particles.js

First of all to download Particles.js library you should go to google.com then search over there for “particles.js download or you could access the file directly through this link: https://github.com/VincentGarreau/particles.js/ download the package and extract it in your coding file then you will need to get only the particles.js file in the whole package.

Install Particles,js:

Copy this file and paste it in your coding folder then go back to the package folder and take the app.js file which is inside the /demo/js/app.js, then take this file to the coding place beside the particles file.

Link Particles.js with HTML:

After installing and coping the files you will need to link these files with your HTML file in your coding place. What you will need is creating html file and inside that create a JS link to these files like the following:

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

Note: put them in the bottom of your web page.

After creating the Jvascript links in your html file you will need to create a <div> tag and create an html ID for that <div> tag lets call this ID “firstLesson”, like the following:

<div id="firstLesson"></div>

The step before the last is to change the id in the “app.js” file that you copied, go to that file and change the default id which is “particles-js” to “firstLesson”.

Now if you tried to refresh the web page you will see no thing because we need the last step, which is changing the body background to any color except the white, because the default color of the library is white. Lets change the color to this color: #b61924. Now every think is working perfect.

Particles.js Web Page |  image
Particles.js Web Page

Here is HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    #firstLesson{
        background-color: #b61924;
    }
</style>
</head>
<body>
<div id="firstLesson"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
</html>

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

Phone:967772223681

If you want to download the file here it is:

Leave a Reply