[Tutorials] Tạo hiệu ứng tuyết rơi Like a Master cho Website WP

/* Code tạo hiệu ứng Tuyết rơi, Hoa rơi ... by RealDev */
add_action('wp_footer', function () {
?>
    <div class="snowfall">
        <canvas id="snow1" width="1920" height="887"></canvas>
    </div>
    <style>
        #snow1 {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            pointer-events: none;
        }
        .snowfall {
            position: fixed;
            pointer-events: none;
            z-index: 2;
        }
        #snow1 {
            filter: brightness(0) saturate(100%) invert(14%) sepia(100%) saturate(7387%) hue-rotate(272deg) brightness(87%) contrast(122%);
        }
    </style>
    <script>
        window.onload = function() {
            var snowCanvas = document.getElementById("snow1");
            var ctx = snowCanvas.getContext("2d");
            var width = window.innerWidth;
            var height = window.innerHeight;
            snowCanvas.width = width;
            snowCanvas.height = height;
            var snowflakes = 15;
            var snowflakeArray = [];
            var angle = 0;
            for (var i = 0; i < snowflakes; i++) {
                snowflakeArray.push({
                    x: Math.random() * width,
                    y: Math.random() * height,
                    r: 4 * Math.random() + 3,
                    d: Math.random() * snowflakes
                });
            }
            var snowImage = new Image();
            snowImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJ7SURBVHgBrVaNsZswDHZ6HYANwgh0A7rB6wZkg2wAnSB0ArIBrxPQDfI2cDoBbKBaQcIfirmX9KI7n40k618Wzj0IRPRGM3RyLsIqwxrCOrpXQxCah+UpDY17JYiyXM5NWKMoYu8KwWfuVRCEXSCci6dCK8Hz/TNCc7E+l+8jnN9AKIZ1kH3UPLKnzI/npPcBWWk+xOqbRwkeVLh4nZBTUiy0Sulf3HPAlv4M6yrfP8L6HdYEPDnsd559FauYcBLcXR4gJCdD6kQoK35321AHGe+73W7SOJ9MmAYIVyc5yiTPPfBh7npZDcgYgfeo1ntgwOJguFCs0D14rDyZwXljPH8fgd9rNVZySV+OFOzFyxos5wLJjREIPa37d/EyN4pa8XY01noRUso6Cw7vjnIXQ3+yRaHlO4jyDJgbiq9LlyioFow8q1KhYRuV9mKeMELDkSUvRdpo7lWGp9Dz0oehZK/uc9h6L1mp0v6E9YHEIPvDWomjx4aUcbWce6uJYhFVcCbwnnEX9FIJHpTUtJ4KJGcvBnDB8DzUFsC73ionqQ1VVmluaJ1kVEaigL0/A60HvDfG6V6J7Nvb6oDY0X0fekqMHoLxZHCjua8t1Kk8B1anoKPYT/q0dUAfKEbH05yrZkMW867ySMZTPbOSQhSOG8JKisWmCjk9LfDcqhjH00H2v6akr1zWt5feuV9ungw6jr47GVfCN5ki1nY4KG1rHk4b+KubR5T2HL8800YPb8mYgeLo0dC0kB8sphFC62GvQE4n+yLTPQMUR1RL0LNCa+h/fqI+UViAtzWtC0w9Kd0rgbZ/hBn38J/3Mz9RuYs/Ud/cXKEHoD0E/wDUg+T725amVAAAAABJRU5ErkJggg==";
            function updateSnowflakes() {
                ctx.clearRect(0, 0, width, height);
                for (var i = 0; i < snowflakes; i++) {
                    var flake = snowflakeArray[i];
                    ctx.drawImage(snowImage, flake.x, flake.y, 2 * flake.r, 2 * flake.r);
                }
                angle += 0.01;
                for (var i = 0; i < snowflakes; i++) {
                    var flake = snowflakeArray[i];
                    flake.y += Math.cos(angle + flake.d) * 0.5 + 0.5 + flake.r / 4; // Giảm tốc độ rơi
                    flake.x += Math.sin(angle) * 1; // Giảm tốc độ di chuyển ngang
                    if (flake.x > width + 5 || flake.x < -5 || flake.y > height) {
                        if (i % 3 > 0) {
                            flake.x = Math.random() * width;
                            flake.y = -10;
                        } else if (Math.sin(angle) > 0) {
                            flake.x = -5;
                            flake.y = Math.random() * height;
                        } else {
                            flake.x = width + 5;
                            flake.y = Math.random() * height;
                        }
                    }
                }
                requestAnimationFrame(updateSnowflakes);
            }
            requestAnimationFrame(updateSnowflakes);
        };
    </script>
<?php
});

#snow1 {
   filter: brightness(0) saturate(100%) invert(14%) sepia(100%) saturate(7387%) hue-rotate(272deg) brightness(87%) contrast(122%)
}