Book now

Particle Effects in WordPress Using Elementor and JavaScript (step by step)

particle effects in WordPress site can elevate its look, creating a dynamic and engaging user experience. In this guide, we’ll walk through how to implement this effect in WordPress, even if you’re not a coding expert. Let’s get started!,Adding animated particles to your WordPress site can make your website stand out without the need for plugins. Using Elementor, along with some HTML and JavaScript code, you can create a lightweight and visually appealing effect. Let’s dive into the steps!

Step 1: Create a Section in Elementor

  1. Open the page where you want the particle effect in Elementor Editor.
  2. Add a new section or edit an existing one where you want the particles to appear.
  3. Give the section a CSS ID (for example, particle-section). This will be used to target the section with your particle effect.

Step 2: Add Custom HTML for Particles

Inside your Elementor section, add an HTML widget.

Paste the following HTML code to create a canvas element for the particle animation:

<style>
.particles-js-canvas-el {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left:0;
}
</style>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 

<script>
//JS Code Here

</script>

The canvas element will serve as the base for the particles. Ensure the id matches the CSS ID you set for the section in Step 1.

Step 3: Add Custom JavaScript for Particle Animation

Now, we’ll add JavaScript to animate the particles:

  1. Go to Elementor > Custom Code in your WordPress dashboard (or if not available, use the Custom HTML widget for JS in the Elementor editor).
  2. Create a new code snippet and paste the following JavaScript code:
particlesJS("particles-js", {"particles":{"number":{"value":400,"density":{"enable":true,"value_area":800}},"color":{"value":"#fff"},"shape":{"type":"star","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":10,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":500,"color":"#ffffff","opacity":0.4,"width":2},"move":{"enable":true,"speed":6,"direction":"bottom","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"bubble"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":0.5}},"bubble":{"distance":400,"size":4,"duration":0.3,"opacity":1,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;

Save and publish the JavaScript code and you need to change the the Z index -1 to 0. then update

Step 5: Test For Run

  1. Open your page in the browser and view the particle effect.
  2. Adjust the particle settings in the JavaScript code if needed. For instance, you can increase or decrease the number of particles by changing the for loop count in the init() function or adjust size for bigger or smaller particles.

Conclusion

Adding animated particles with this code-based approach ensures a lightweight, customizable effect that can enrich the visual experience on your site. This solution is plugin-free and gives you full control over how your particles appear and behave. Enjoy the interactive touch!

Top Recent Post