How to create an Awesome Particle Animation

awesome particle animation

In this post will show you how to create an animated particle background. Particle animation is a great alternative to standard hero sections on a web page; you might have seen them used on sites

we are defining a class called slide and we are using a property display : none.

The main concept here is that there are some particles on the canvas which start attracting other when they come close to each other. Also, they’ll start drawing lines between them as they come closer to each other and the opacity of the lines depends upon the distance between them when we mouse hover .

Amazing particle animation now is in your hand. Finally i brought the code after long search.
you can put your own image/logo in this place, apply the above code.

HTML5 & CSS3 has introduced number of possibilities for UX designers and UI developers.
Awesome Transition effects, Two lines of code give you Reliance of happiness when executed.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Particle Animation </title>
  <style>
  html,
body {
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html .slides,
body .slides,
html > .dg,
body > .dg {
  display: none;
}
@media (min-width: 1000px) {
  body > .dg {
    display: block;
  }
}
</style>  
</head>  
<script  src="js/index.js"></script>
</html>

Colors & Settings

You can change / apply any color to the particles. you can manage speed and distance of particles.

CSS

html,
body {
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html .slides,
body .slides,
html > .dg,
body > .dg {
  display: none;
}
@media (min-width: 1000px) {
  body > .dg {
    display: block;
  }
}

index.js

var init = function(){
  var isMobile = navigator.userAgent &&
    navigator.userAgent.toLowerCase().indexOf('mobile') >= 0;
  var isSmall = window.innerWidth < 1000;
  
  var ps = new ParticleSlider({
    ptlGap: isMobile || isSmall ? 3 : 0,
    ptlSize: isMobile || isSmall ? 3 : 1,
    width: 1e9,
    height: 1e9
  });
    
  var gui = new dat.GUI();
  gui.add(ps, 'ptlGap').min(0).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'ptlSize').min(1).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'restless');
  gui.addColor(ps, 'color').onChange(function(value){
    ps.monochrome = true;
    ps.setColor(value);
	  ps.init(true);
  });
  
  (window.addEventListener
   ? window.addEventListener('click', function(){ps.init(true)}, false)
   : window.onclick = function(){ps.init(true)});
}

var initParticleSlider = function(){
  var psScript = document.createElement('script');
  (psScript.addEventListener
    ? psScript.addEventListener('load', init, false)
    : psScript.onload = init);
  psScript.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/ps-0.9.js';
	psScript.setAttribute('type', 'text/javascript');
  document.body.appendChild(psScript);
}
    
(window.addEventListener
  ? window.addEventListener('load', initParticleSlider, false)
  : window.onload = initParticleSlider);

How does it works ?

Very simple to use this code.

Step1

a. Convert your image to svg.
b. SVG to Data URI converter
source:https://codepen.io/elliz/pen/ygvgay

Step2

Apply code and Move mouse on image.

Leave a Reply

Your email address will not be published. Required fields are marked *