Add Christmas Snowfall Animation Effect to Blogger with jQuery

Today, in this article we will Learn How to Add Christmas Snowfall Animation Effect to Blooger with jQuery. There is no rocket science behind this widget because we have used a modest Jquery functionality which creates an Animated Christmas Snowfall Effect. Welcome your website or blog visitors with falling snow on this Christmas. Keeping that in mind, we have created a widget based on Snowfall Animation Effect wth jQuery. Whenever, a visiter would visit your website it would display Animated Snowfall all across your site.

Christmas Snowfall Animation Effect to Blooger with jQuery

VIEW DEMO

The steps mentioned below are extremely straight forward and would take less than 2 minutes to complete the integration. There is no need to learn anything just follow the steps as they are mentioned below.

Step 1. Go to Blogger Dashboard
Step 2. Click on Theme >> Edit HTML
Step 3. In the Theme Section, Search for the </head> tag and just above it Paste the Entire jQuery Coding. That's It.

if (doRatio === false) {
      this.x += Math.cos(this.step);
     } else {
      this.x += (doRatio + Math.cos(this.step));
     }

// Pileup check
     if(options.collection){
      if(this.x > this.target.x && this.x < this.target.width + this.target.x && this.y > this.target.y && this.y < this.target.height + this.target.y){
       var ctx = this.target.element.getContext("2d"),
        curX = this.x - this.target.x,
        curY = this.y - this.target.y,
        colData = this.target.colData;
        
        if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] !== undefined || curY+this.speed+this.size > this.target.height){
         if(curY+this.speed+this.size > this.target.height){
          while(curY+this.speed+this.size > this.target.height && this.speed > 0){
           this.speed *= .5;
          }

ctx.fillStyle = "#fff";
          
          if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] == undefined){
           colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] = 1;
           ctx.fillRect(curX, (curY)+this.speed+this.size, this.size, this.size);
          }else{
           colData[parseInt(curX)][parseInt(curY+this.speed)] = 1;
           ctx.fillRect(curX, curY+this.speed, this.size, this.size);
          }
          this.reset();
         }else{
          // flow to the sides
          this.speed = 1;
          this.stepSize = 0;
         
          if(parseInt(curX)+1 < this.target.width && colData[parseInt(curX)+1][parseInt(curY)+1] == undefined ){
           // go left
           this.x++;
          }else if(parseInt(curX)-1 > 0 && colData[parseInt(curX)-1][parseInt(curY)+1] == undefined ){
           // go right
           this.x--;
          }else{
           //stop
           ctx.fillStyle = "#fff";
           ctx.fillRect(curX, curY, this.size, this.size);
           colData[parseInt(curX)][parseInt(curY)] = 1;
           this.reset();
          }
         }
        }
      }
     }
     
     if(this.x > (elWidth) - widthOffset || this.x < widthOffset){
      this.reset();
     }
    }
    
    // Resets the snowflake once it reaches one of the bounds set
    this.reset = function(){
     this.y = 0;
     this.x = random(widthOffset, elWidth - widthOffset);
     this.stepSize = random(1,10) / 100;
     this.size = random((options.minSize * 100), (options.maxSize * 100)) / 100;
     this.speed = random(options.minSpeed, options.maxSpeed);
    }
   }
  
   // Private vars
   var flakes = [],
    flakeId = 0,
    i = 0,
    elHeight = $(element).height(),
    elWidth = $(element).width(),
    widthOffset = 0,
    snowTimeout = 0;
  
   // Collection Piece ******************************
   if(options.collection !== false){
    var testElem = document.createElement('canvas');
    if(!!(testElem.getContext && testElem.getContext('2d'))){
     var canvasCollection = [],
      elements = $(options.collection),
      collectionHeight = options.collectionHeight;
     
     for(var i =0; i < elements.length; i++){
       var bounds = elements[i].getBoundingClientRect(),
        canvas = document.createElement('canvas'),
        collisionData = [];

if(bounds.top-collectionHeight > 0){         
        document.body.appendChild(canvas);
        canvas.style.position = 'absolute';
        canvas.height = collectionHeight;
        canvas.width = bounds.width;
        canvas.style.left = bounds.left + 'px';
        canvas.style.top = bounds.top-collectionHeight + 'px';
        
        for(var w = 0; w < bounds.width; w++){
         collisionData[w] = [];
        }
        
        canvasCollection.push({element :canvas, x : bounds.left, y : bounds.top-collectionHeight, width : bounds.width, height: collectionHeight, colData : collisionData});
       }
     }
    }else{
     // Canvas element isnt supported
     options.collection = false;
    }
   }
   // ************************************************
   
   // This will reduce the horizontal scroll bar from displaying, when the effect is applied to the whole page
   if($(element).get(0).tagName === $(document).get(0).tagName){
    widthOffset = 25;
   }
   
   // Bind the window resize event so we can get the innerHeight again
   $(window).bind("resize", function(){  
    elHeight = $(element).height();
    elWidth = $(element).width();
   });

// initialize the flakes
   for(i = 0; i < options.flakeCount; i+=1){
    flakeId = flakes.length;
    flakes.push(new Flake(random(widthOffset,elWidth - widthOffset), random(0, elHeight), random((options.minSize * 100), (options.maxSize * 100)) / 100, random(options.minSpeed, options.maxSpeed), flakeId));
   }

// This adds the style to make the snowflakes round via border radius property 
   if(options.round){
    $('.snowfall-flakes').css({'-moz-border-radius' : options.maxSize, '-webkit-border-radius' : options.maxSize, 'border-radius' : options.maxSize});
   }
   
   // This adds shadows just below the snowflake so they pop a bit on lighter colored web pages
   if(options.shadow){
    $('.snowfall-flakes').css({'-moz-box-shadow' : '1px 1px 1px #555', '-webkit-box-shadow' : '1px 1px 1px #555', 'box-shadow' : '1px 1px 1px #555'});
   }

// On newer Macbooks Snowflakes will fall based on deviceorientation
   var doRatio = false;
   if (options.deviceorientation) {
    $(window).bind('deviceorientation', function(event) {
     doRatio = event.originalEvent.gamma * 0.1;
    });
   }

// this controls flow of the updating snow
   function snow(){
    for( i = 0; i < flakes.length; i += 1){
     flakes[i].update();
    }
    
    snowTimeout = setTimeout(function(){snow()}, 30);
   }
   
   snow();
  
  // Public Methods
  
  // clears the snowflakes
  this.clear = function(){
      $(element).children('.snowfall-flakes').remove();
      flakes = [];
      clearTimeout(snowTimeout);
     };
 };
 
 // Initialize the options and the plugin
 $.fn.snowfall = function(options){
  if(typeof(options) == "object" || options == undefined){  
     return this.each(function(i){
     (new $.snowfall(this, options)); 
    }); 
  }else if (typeof(options) == "string") {
   return this.each(function(i){
    var snow = $(this).data('snowfall');
    if(snow){
     snow.clear();
    }
   });
  }
 };
})(jQuery);

//Reveal Popup

(function($) {

/*---------------------------
 Christmas Snowfall By www.myshayarizone.com
----------------------------*/

/*---------------------------
 Extend and Execute
----------------------------*/

$.fn.reveal = function(options) {
        
        
        var defaults = {  
      animation: 'fadeAndPop', //fade, fadeAndPop, none
      animationspeed: 300, //how fast animtions are
      closeonbackgroundclick: true, //if you click background will modal close?
      dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
     }; 
     
        //Extend dem' options
        var options = $.extend({}, defaults, options); 
 
        return this.each(function() {

/*---------------------------
 Animations Locks
----------------------------*/
   function unlockModal() { 
    locked = false;
   }
   function lockModal() {
    locked = true;
   } 
   
        });//each call
    }//orbit plugin call
})(jQuery);
                                 
//]]></script>       
<script>       
//<![CDATA[
/*Christmas Snowfall Script By My Shayari Zone*/
//Do Not Edit (myshayarizone.com)      
$(document).ready(function()       
{                
$('a.close-reveal-modal').click(function() {$(document).snowfall('clear');});       
//Do Not Edit (myshayarizone.com)       
$(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8,  flakeCount : 250});       
});
//]]>       
</script>

If jQuery is already have been added into your theme, remove below line from the above code <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.min.js">
If you don't want special device orientation effect in mobile devices set this false) deviceorientation : true

Optional Tricks:
If you want to show this animated Fireworks effect on your entire website then you have done it or if you want to show this effect on particular sections or pages of your website then these conditional tags will help you.

For Home Page Only

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Add jQuery Code Here
</b:if>

For Posts Page Only

<b:if cond='data:blog.pageType == "item"'>
Add jQuery Code Here
</b:if>

For Static Page Only

<b:if cond='data:blog.pageType == "static_page"'>
Add jQuery Code Here
</b:if>

For Labels Page Only

<b:if cond='data:blog.searchLabel'>
Add jQuery Code Here
</b:if>

For a Particular Page Only

<b:if cond='data:blog.url == "https://blog.myshayarizone.com"'>
Add jQuery Code Here
</b:if>

Replace https://blog.myshayarizone.com with the URL of your website page or post.

Also Check : Add Fireworks or Crackers Animation Effect in Blogger with jQuery

You Done It: After editing, Save the Template by Pressing “Save Template” button and open your website or blog and see the animated Christmas Snowfall effect immediately.

We hope this tutorial may have helped you in learning How to Add Christmas Snowfall Animation Effect to Blooger with jQuery in your blog or website. If you find any difficulty then don't be hesitate to Contact us

You can find Hindi Shayari Poetry SMS, Whatsapp DP Status, Wallpaper Image Photo for every mood or emotion - MY SHAYARI ZONE