How to Add Diwali Celebration Animation in WordPress Website

<!-- Insert below code in functions.php file -->

<!-- Add custom HTML Hook -->

function add_custom_div(){

 	echo '<div id="diwali"></div>';

	echo '<div id="fireworksContainer"></div>';

	echo '<style>

			#diwali {

				position: fixed;

				top: 0;

				left: 0;

				right: 0;

				bottom: 0;

				pointer-events: none;

				z-index: 1000;

			}

			 #fireworksContainer {

				position: fixed;

				top: 0;

				left: 0;

				width: 100vw;

				height: 100vh;

				z-index: 999999; /* High z-index to overlay on top of content */

				pointer-events: none; /* Allow clicking through to other content */

			}

		</style>';

}

add_action( 'wp_footer', 'add_custom_div' );

<!-- Add JS using hook -->

function diwali_js() {

   ?>

<script>

document.addEventListener('DOMContentLoaded', function(){

    setTimeout(function() {

        var script = document.createElement('script');

        script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';

        script.onload = function(){

            particlesJS("diwali", {

                "particles": {

                    "number": {

                        "value": 50, // Reduced number of images

                        "density": {

                            "enable": true,

                            "value_area": 1000

                        }

                    },

                    "color": {

                        "value": "#ffffff"

                    },

                    "shape": {

                      "type": "image",

                      "stroke": {

                        "width": 3,

                        "color": "#fff"

                      },

                      "polygon": {

                        "nb_sides": 15

                      },

                      "image": {

						"src": "https://e7.pngegg.com/pngimages/60/937/png-clipart-diwali-lantern-india-diwali-lantern-holidays.png",						

						"width": 298,

						"height": 529

					  }

                    },

                    "opacity": {

                        "value": 0.9,

                        "random": false,

                        "anim": {

                            "enable": false

                        }

                    },

                    "size": {

                        "value": 12,

                        "random": true,

                        "anim": {

                            "enable": false

                        }

                    },

                    "line_linked": {

                        "enable": false

                    },

                    "move": {

                        "enable": true,

                        "speed": 1,

                        "direction": "bottom",

                        "random": true,

                        "straight": false,

                        "out_mode": "out",

                        "bounce": false,

                        "attract": {

                            "enable": true,

                            "rotateX": 300,

                            "rotateY": 1200

                        }

                    }

                },

                "interactivity": {

                    "events": {

                        "onhover": {

                            "enable": false

                        },

                        "onclick": {

                            "enable": false

                        },

                        "resize": false

                    }

                },

                "retina_detect": true

            });

        }

        document.head.append(script);

    }, 6000); // Delay execution by 5 seconds

});

</script>

<?php

}

add_action( 'wp_footer', 'diwali_js' );

function fireworks_js() {

   ?>

<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js"></script>

<script>

	 const container = document.getElementById('fireworksContainer');

        // Fireworks configuration

        const fireworks = new Fireworks(container, {

            hue: { min: 0, max: 360 },

            delay: { min: 30, max: 50 }, // Increase delay between each firework

            speed: 1, // Slow down the speed (lower value)

            acceleration: 1.00, // Slightly less acceleration to slow down firework rise

            friction: 0.97,

            gravity: 1.0, // Adjust gravity to slow particle fall

            particles: 100,

            trace: 3,

            explosion: 2, // Lower explosion value for slower burst effect

            autoresize: true,

            brightness: { min: 50, max: 80, decay: { min: 0.015, max: 0.03 } },

            boundaries: { x: 50, y: 50, width: container.clientWidth, height: container.clientHeight },

            sound: { enable: true, files: ['https://fireworks.js.org/sounds/explosion0.mp3', 'https://fireworks.js.org/sounds/explosion1.mp3', 'https://fireworks.js.org/sounds/explosion2.mp3'], volume: { min: 2, max: 4 } }

        });

        fireworks.start();

        // Stop fireworks after 6 seconds (6000 milliseconds)

        setTimeout(() => {

            fireworks.stop(); // Stop the fireworks

        }, 6000);

        // Optional: Fireworks on click

        document.body.addEventListener('click', (e) => {

            fireworks.setOptions({ x: e.clientX, y: e.clientY });

            fireworks.explode();

        });

</script>

<?php

}

add_action( 'wp_footer', 'fireworks_js' );