Home Web Development JavaScript Canvas Particle Animation With Particle JS | Tech Lines Background

Canvas Particle Animation With Particle JS | Tech Lines Background

December 3, 2019

4980

How we can create a particle background animation easily using any JS library? Solution: See this Canvas Particle Animation With Particle JS, Tech Lines Background.

Previously I have shared an Error 404 Page particle animation, but this is only about the animation. Basically, nowadays modern websites which are tech or programming related they use particle or any other animation on the landing page. There are many libraries of creating that kind of animation easily, but the most popular is particles.js which is based on JavaScript.

Today you will learn to create Tech Lines Background with JS library. Basically, there is a full-screen background image and over the image, you will see particle lines like tech or geek background. These kind lines basically represent tech fields like coding, AI, etc for the audience. And when you will hover on the lines it will connect to mouse cursor and moves according to mouse direction.

So, Today I am sharing Canvas Particle Animation With Particle JS. There is a separate library for only creating particles named particle.js(get), which I have used to create this program. This is a lightweight JavaScript library for creating particles. The whole program very short and completely based on that.

If you are thinking now how this particle animation actually is, then see the preview given below.

Preview Of Tech Lines Background

See this video preview to getting an idea of how this animation looks like.

https://webdevtrick.com/wp-content/uploads/particle-js-animation.mp4?_=1

Live Demo

Now you can see this visually, also you can see the live demo by pressing the button given above. If you like this, then get the source code of its.

Canvas Particle Animation With Particle JS Source Code

Before sharing source code, let’s talk about it. First, I just created a single div with an ID name using HTML. That the only thing I have done using HTML, but I have linked other files like CSS, JS and praticle.js link in the HTML file. HTML has fewer parts because it is based on a library and a very basic program.

Now using CSS, I have placed all the elements in the right place like image, and particles. There also CSS has a very small part, because I gave just height and width to the body and the container div. JavaScript file only to declare particle values like density, speed, etc. First I have fetched the container div using JS document.getElementById command.

I have stored the ID and options for animation in variables, and the option is a pre-built function of the library. For placing the background image, I have used the library’s background command. Also, I have declared the density of particles and the speed of moving. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files, first for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this program without any trouble.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html> 
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Canvas Particle Animation | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

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

  <script src='https://rawgit.com/JulianLaval/canvas-particle-network/master/particle-network.min.js'></script>
  <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Canvas Particle Animation | Webdevtrick.com</title>

</head>

<body>

</body>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100%;
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

html,

body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

#container {

width: 100%;

height: 100%;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
var canvasDiv = document.getElementById('container');
var options = {
  particleColor: '#fff',
  background: 'https://webdevtrick.com/wp-content/uploads/coding.jpg',
  interactive: true,
  speed: 'high',
  density: 'high'
};
var particleCanvas = new ParticleNetwork(canvasDiv, options);

// Code By Webdevtrick ( https://webdevtrick.com )

var canvasDiv = document.getElementById('container');

var options = {

particleColor: '#fff',

background: 'https://webdevtrick.com/wp-content/uploads/coding.jpg',

interactive: true,

speed: 'high',

density: 'high'

};

var particleCanvas = new ParticleNetwork(canvasDiv, options);

That’s It. Now you have successfully created Canvas Particle Animation With Particle JS, Tech Lines Background Animation. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.