How to add Snowfall Effect in Blogger or Wordpress website

How to add Snowfall Effect in Blogger or Wordpress website

How to add snowfall effect in blogger or wordpress website

If you are thinking about customising 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.

In this article, 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>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Now copy the code provided below and paste it just before the code we found in step 4.
  7. <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;
    <div id="snowflakeContainer">
    <span class="snowflake"></span>
      // 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;
      // It all starts here...
      function setup() {
        if (enableAnimations) {
          window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
          window.addEventListener("resize", setResetFlag, false);
      // 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 = (.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 = .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) { = `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; = "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);
          // 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,
        // remove the original snowflake because we no longer need it visible
      // 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];
        // 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;
      // 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;
  8. 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 customise according to your requirements for example snowfall count.


After performing all the steps and pasting the code provided above in 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.

I hope this article helped you a lot and hopefully, you will share this article with your friends I think that you have enjoyed this article if you want to see the demo of the snowfall effect go to the link provided below and see the snowfall effect, well that's also my website where you can find high quality, responsive blogger templates for free.

View Demo

No Comment

Help us improve this article by leaving your feedback below.
Add Comment
Previous Post Next Post