Skip to main content

Archive

Show more

Particle Background Animation | HTML, CSS And ParticleJs

by Rustcode
Particle-Background-Animation-HTML-CSS-And-ParticlesJs

Particle Background Animation Using HTML, CSS And ParticlesJS

You visit many websites every day that has various kinds of background like some have to image in the background, some have single color and some have gradient color. But recently a new background trend has been started which have particle and line combination that connect and break to each other continuously. This background knows as "Particle Background". As you can see in the image.

The concept is already explained, so let's talk about the technologies that we are using for this animation. html and css are common but we are using the javascript plugin "ParticlesJs".

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Particle Background Animation</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

ParticleJs Script: Download

<!DOCTYPE html>
<html>
<head>
  <title>Particle Background Animation Background</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  <canvas class="background"></canvas>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</body>
</html>



03. CSS

html, body{
  margin: 0px;
  padding: 0px;
  background: #000000;
}
.background{
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  z-index: 0;
}
div>



04. JAVASCRIPT

window.onload = function(){
  Particles.init({
    selector: '.background',
    maxParticles: 150,
    connectParticles: 'true',
    speed:2,
    minDistance: 140,
    sizeVariations: 4,
    color: '#ffffff'
  });
}


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment