Add Snowfall Effect in Blogger or Wordpress Website

If you are thinking about customizing your website, that's an excellent decision. Do you know that 90% of your website visits are due to the appearance of your website.

Most users come to your website because they like the style of your website.

In this article, I am going to tell you how to add the snowfall effect in blogger blogs or in WordPress.

I will provide you with the steps to add this snowfall effect in blogger you can also add this snowfall effect to your WordPress site by simply going to the theme editor and pasting the following code in the header.php file of your WordPress site.

These are some steps that you have to follow to add this snowfall effect in blogger.

Steps To Follow:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </body>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Now copy the code provided below and paste it just before the code we found in step 4.

<style>
    #snowflakeContainer {
        position: absolute;
        left: 0px;
        top: 0px;
        display: none;
    }

    .snowflake {
        position: fixed;
        background-color: #ccc;
        user-select: none;
        z-index: 1000;
        pointer-events: none;
        border-radius: 50%;
        width: 10px;
        height: 10px;
    }
</style>

<div id="snowflakeContainer">
    <span class="snowflake"></span>
</div>

<script>
    //<![CDATA[
    // Array to store our Snowflake objects
    var snowflakes = [];

    // Global variables to store our browser's window size
    var browserWidth;
    var browserHeight;

    // Specify the number of snowflakes you want visible
    var numberOfSnowflakes = 50;

    // Flag to reset the position of the snowflakes
    var resetPosition = false;

    // Handle accessibility
    var enableAnimations = false;
    var reduceMotionQuery = matchMedia("(prefers-reduced-motion)");

    // Handle animation accessibility preferences
    function setAccessibilityState() {
        if (reduceMotionQuery.matches) {
            enableAnimations = false;
        } else {
            enableAnimations = true;
        }
    }
    setAccessibilityState();

    reduceMotionQuery.addListener(setAccessibilityState);

    //
    // It all starts here...
    //
    function setup() {
        if (enableAnimations) {
            window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
            window.addEventListener("resize", setResetFlag, false);
        }
    }
    setup();

    //
    // Constructor for our Snowflake object
    //
    function Snowflake(element, speed, xPos, yPos) {
        // set initial snowflake properties
        this.element = element;
        this.speed = speed;
        this.xPos = xPos;
        this.yPos = yPos;
        this.scale = 1;

        // declare variables used for snowflake's motion
        this.counter = 0;
        this.sign = Math.random() < 0.5 ? 1 : -1;

        // setting an initial opacity and size for our snowflake
        this.element.style.opacity = (0.1 + Math.random()) / 3;
    }

    //
    // The function responsible for actually moving our snowflake
    //
    Snowflake.prototype.update = function () {
        // using some trigonometry to determine our x and y position
        this.counter += this.speed / 5000;
        this.xPos += (this.sign * this.speed * Math.cos(this.counter)) / 40;
        this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
        this.scale = 0.5 + Math.abs((10 * Math.cos(this.counter)) / 20);

        // setting our snowflake's position
        setTransform(Math.round(this.xPos), Math.round(this.yPos), this.scale, this.element);

        // if snowflake goes below the browser window, move it back to the top
        if (this.yPos > browserHeight) {
            this.yPos = -50;
        }
    };

    //
    // A performant way to set your snowflake's position and size
    //
    function setTransform(xPos, yPos, scale, el) {
        el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0) scale(${scale}, ${scale})`;
    }

    //
    // The function responsible for creating the snowflake
    //
    function generateSnowflakes() {
        // get our snowflake element from the DOM and store it
        var originalSnowflake = document.querySelector(".snowflake");

        // access our snowflake element's parent container
        var snowflakeContainer = originalSnowflake.parentNode;
        snowflakeContainer.style.display = "block";

        // get our browser's size
        browserWidth = document.documentElement.clientWidth;
        browserHeight = document.documentElement.clientHeight;

        // create each individual snowflake
        for (var i = 0; i < numberOfSnowflakes; i++) {
            // clone our original snowflake and add it to snowflakeContainer
            var snowflakeClone = originalSnowflake.cloneNode(true);
            snowflakeContainer.appendChild(snowflakeClone);

            // set our snowflake's initial position and related properties
            var initialXPos = getPosition(50, browserWidth);
            var initialYPos = getPosition(50, browserHeight);
            var speed = 5 + Math.random() * 40;

            // create our Snowflake object
            var snowflakeObject = new Snowflake(snowflakeClone, speed, initialXPos, initialYPos);
            snowflakes.push(snowflakeObject);
        }

        // remove the original snowflake because we no longer need it visible
        snowflakeContainer.removeChild(originalSnowflake);

        moveSnowflakes();
    }

    //
    // Responsible for moving each snowflake by calling its update function
    //
    function moveSnowflakes() {
        if (enableAnimations) {
            for (var i = 0; i < snowflakes.length; i++) {
                var snowflake = snowflakes[i];
                snowflake.update();
            }
        }

        // Reset the position of all the snowflakes to a new value
        if (resetPosition) {
            browserWidth = document.documentElement.clientWidth;
            browserHeight = document.documentElement.clientHeight;

            for (var i = 0; i < snowflakes.length; i++) {
                var snowflake = snowflakes[i];

                snowflake.xPos = getPosition(50, browserWidth);
                snowflake.yPos = getPosition(50, browserHeight);
            }

            resetPosition = false;
        }

        requestAnimationFrame(moveSnowflakes);
    }

    //
    // This function returns a number between (maximum - offset) and (maximum + offset)
    //
    function getPosition(offset, size) {
        return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
    }

    //
    // Trigger a reset of all the snowflakes' positions
    //
    function setResetFlag(e) {
        resetPosition = true;
    }
    //]]>
</script>

6. Save Theme/Template

If you are a web designer or if you have any knowledge about JavaScript you can read the comments on the JavaScript code and understand the code and its functionalities.

In the JavaScript code above there are some settings that you can customize according to your requirements for example snowfall count.

Conclusion:

After performing all the steps and pasting the code provided above into the HTML template of your blogger blog for the WordPress site save the settings and preview your website.

If you have performed all the steps accordingly then you will see a snowfall effect on your WordPress or blogger site but if you have done any mistake you will not see a snowfall effect.