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.
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
- Login to your Bloggger dashboard.
- Now go to theme section and click on edit HTML.
- Now search for
</head>tag in your theme. - 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
- After copying the css code.
- Search for
</body>tag in your theme. - 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>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.