JavaScript Particle Explosion on Click

This JavaScript code snippet helps you to create particle explosion 💥 effect on click event. It dynamically appends particles with absolute position in a container where they are initialized.

Generally, a particle is a div element that appended through jQuery append method in a click handler function. This click event can be attached with any DOM’s element. The best part is that you’re not limited to show the particles effect on a canvas element only.

Moreover, you can fully customize the particles using CSS and display them on any JavaScript events like click, mouseover, mousedown, touch, and scroll etc.

How to Create JavaScript Particle Explosion on Click

Basically, you can display the particles explosion effect anywhere on the webpage or attach it to a specific container.

<div class="particle__container">
<h2>click anywhere on this container</h2>
</div>

Style the particles using the following CSS. If you want to customize the particles, you can set the custom width, height and background color.

.particle__container{
   background: #000 !important;
   width: 100%;
   min-height: 450px;
   color: #fff;
   text-align: center;
   padding: 25px;
}
.explosion {
  position: absolute;
  width: 600px;
  height: 600px;
  pointer-events: none;
}
.explosion .particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pop 1s reverse forwards;
}

@keyframes pop {
  from {
    opacity: 0;
  }
  to {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}
html, body {
  height: 100%;
  background: #000;
}

Load the jQuery by adding the following CDN link before closing the body tag.

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

Finally, add the following JavaScript code just after the jQuery and done.

// click event listener
$('.particle__container').on('click', function(e) {
  explode(e.pageX, e.pageY);
})

// explosion construction
function explode(x, y) {
  var particles = 15,
    // explosion container and its reference to be able to delete it on animation end
    explosion = $('<div class="explosion"></div>');

  // put the explosion container into the body to be able to get it's size
  $('body').append(explosion);

  // position the container to be centered on click
  explosion.css('left', x - explosion.width() / 2);
  explosion.css('top', y - explosion.height() / 2);

  for (var i = 0; i < particles; i++) {
    // positioning x,y of the particle on the circle (little randomized radius)
    var x = (explosion.width() / 2) + rand(80, 150) * Math.cos(2 * Math.PI * i / rand(particles - 10, particles + 10)),
      y = (explosion.height() / 2) + rand(80, 150) * Math.sin(2 * Math.PI * i / rand(particles - 10, particles + 10)),
      color = rand(0, 255) + ', ' + rand(0, 255) + ', ' + rand(0, 255), // randomize the color rgb
        // particle element creation (could be anything other than div)
      elm = $('<div class="particle" style="' +
        'background-color: rgb(' + color + ') ;' +
        'top: ' + y + 'px; ' +
        'left: ' + x + 'px"></div>');

    if (i == 0) { // no need to add the listener on all generated elements
      // css3 animation end detection
      elm.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
        explosion.remove(); // remove this explosion container when animation ended
      });
    }
    explosion.append(elm);
  }
}

// get random number between min and max value
function rand(min, max) {
  return Math.floor(Math.random() * (max + 1)) + min;
}

That’s all! hopefully, you have successfully created particle explosion animation on click event. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.