Buy Plus UI v2.6! Demo Buy Now!

Adding Snow Falling Animation In Blogger Website

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello viewers and Blogger's. Literally I was browsing and suddenly I came to see snow Falling in some of the blogs.

And I questioned ❓ myself how did they have done it. How can we apply on our blog also.

So today we are going to Add Snow ❄️ falling animation in Blogger's website. So that your blog will look awesome when someone click on Dark Mode.

Adding Snow Falling Animation In Blogger Website

Some of the benefits of adding this effect is it will attract your viewers and make your site attractive to them while preventing your viewers to do not getting bored 🥱.

Adding Snow Falling Effect On Blogger Site

There are only two steps you have to follow and add this effect on your site.

Below are the given steps please follow it carefully.

Before doing any steps as always kindly backup your website theme for any kind of error and easy restoration process.

Step 1

  1. Login to your Bloggger dashboard.
  2. Now go to theme section and click on edit HTML.
  3. Now search for </head> tag in your theme.
  4. Now paste the below given CSS just above/ahead of </head> tag.
<style type='text/css'>
/* Snow Falling Effect */
.techyball{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
.snowstech{height:100%;position:relative;overflow:hidden;z-index:1}
</style>

Step 2

  1. After copying the css code.
  2. Search for </body> tag in your theme.
  3. Now paste the below give code just above </body> tag.
<div class='snowstech'>
<canvas class='techyball' id='techyball'></canvas>
</div>
<script type='text/javascript'>
//<![CDATA[
!function(){function t(t){var n=t.getContext("2d"),e=0,i=0,o=[],d=function(){this.x=this.y=this.dx=this.dy=0,this.reset()};function a(){e=window.innerWidth,i=window.innerHeight,t.width=e,t.height=i,function(t){if(t!=o.length){o=[];for(var n=0;n<t;n++)o.push(new d)}}(e*i/1e4)}d.prototype.reset=function(){this.y=Math.random()*i,this.x=Math.random()*e,this.dx=1*Math.random()-.5,this.dy=.5*Math.random()+.5},a(),function t(){n.clearRect(0,0,e,i),n.fillStyle="rgba(255,255,255,.3)",o.forEach(function(t){t.y+=t.dy,t.x+=t.dx,t.y>i&&(t.y=0),t.x>e&&(t.reset(),t.y=0),n.beginPath(),n.arc(t.x,t.y,5,0,2*Math.PI,!1),n.fill()}),window.requestAnimationFrame(t)}(),window.addEventListener("resize",a)}var n;n=function(){t(document.getElementById("techyball"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>
Now click on save theme.

I have added this effect on this particular page only also. You can also view this effect by clicking on view in Dark Mode button below.

Button Reference - Tech With Deo

Now after following the above steps I think you have successfully added snow falling 🌨️ effect on your site. If you have any problem implementing this effect kindly contact us.

Conclusion

So in this post we have discussed about How to add snow falling animation on blogger website. If you have any query kindly comment below. And do follow our blog and like this post by giving star ⭐ rating below.

Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee

2 comments

  1. Can you give me your gmail? I want to ask you a questions
    1. capitalmarket1819@gmail.com
Please do not spam in the comment section or your comment will not be approved.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.