Home / Widgets / How to Add Christmas Celebration Animation in WordPress Website
Duplicate Snippet

Embed Snippet on Your Site

How to Add Christmas Celebration Animation in WordPress Website

Add Christmas Snow Animation in WordPress Website

Code Preview
php
<?php
<!-- Insert below code in functions.php file -->
<!-- Add custom HTML Hook -->
function add_custom_div(){
    // add your custom code here to do something
    echo '<div id="snow"></div>';
	echo '<style>
			#snow {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
			z-index: 1000;
		}
		</style>';
}
add_action( 'wp_footer', 'add_custom_div' );
<!-- Add JS using hook -->
function snow_js() {
   ?>
<script>
document.addEventListener('DOMContentLoaded', function(){
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
    script.onload = function(){
        particlesJS("snow", {
            "particles": {
                "number": {
                    "value": 300,
                    "density": {
                        "enable": true,
                        "value_area": 800
                    }
                },
                "color": {
                    "value": "#ffffff"
                },
				"shape": {
				  "type": "image",
				  "stroke": {
					"width": 3,
					"color": "#fff"
				  },
				  "polygon": {
					"nb_sides": 5
				  },
				  "image": {
					"src": "https://nsquareit.com/wp-content/uploads/2023/12/klipartz.com_.png",
					"width": 100,
					"height": 100
				  }
				},
                "opacity": {
                    "value": 0.9,
                    "random": false,
                    "anim": {
                        "enable": false
                    }
                },
                "size": {
                    "value": 5,
                    "random": true,
                    "anim": {
                        "enable": false
                    }
                },
                "line_linked": {
                    "enable": false
                },
                "move": {
                    "enable": true,
                    "speed": 3,
                    "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);
});
</script>
<?php
}
add_action( 'wp_footer', 'snow_js' );

Comments

Add a Comment