How to add Snowfall Effect in Blogger or Wordpress website
close
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 to customise your website that's excellent decision. Do you know that 90% of your website visits are due to the appearance of your website.

Mostly 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 snow fall effect in blogger blog or in WordPress.

In this this article I will provide you the steps to add this snowfall effect in blogger you can also add this snowfall effect in in your wordpress site by simply going to the theme editor and paste 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 founded 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;
      }
    </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 = (.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) {
        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>
  8. Save Theme/Template

If you are a web designer or if you have any knowledge about JavaScript you can read the comments of 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.

Conclusion:

After performing all the steps and pasting the code provided above in your HTML template of your blogger blog for wordpress site save the settings and preview your website. If you have performed all the steps accordingly then you will see snowfall effect on your wordpress or blogger site but if you have done any mistake you will not see snowfall effect.

I hope this article helped you a lot and hopefully you will share this article with your friends and 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
Disqus Codes

No comments

Notifications

Disqus Logo