JavaScript Particle Explosion on Click

JavaScript Particle Explosion on Click
Code Snippet:Particle explosion JS/CSS3
Author: Aleksei
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 4,574
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X