Christmas time and bloggers start to look for ideas to design their blog. From changing header to background, every blogger wants to give a different christmas theme to their blog. Some of the bloggers know about this effect and they search for a way to add this effect to their blog.
The snowfall effect code snippet includes several features that enhance the visual appeal and behavior of the falling snowflakes on your website. Let’s explore some of these features:
- The code generates a realistic Snowfall Effect for Blogger by animating multiple snowflake particles that descend from the top of the screen. Each snowflake is represented by a small circle drawn on the canvas.
- The density of the snowflakes can be adjusted by modifying the `createParticles` function. By changing the count parameter, you can control the number of snowflake particles created, thereby controlling the density of the snowfall.
- Each snowflake particle has randomized properties such as position, velocity, and size. This randomness creates a natural and organic snowfall effect. The `reset` method of the `Particle` class is responsible for randomizing these properties each time a snowflake is reset or initially created.
- Â The snowfall effect adapts to different screen sizes and is responsive. When the window is resized, the `resizeCanvas` function is triggered, adjusting the size of the canvas and recreating the snowflake particles to fit the new dimensions. This ensures that the snowfall effect remains visually appealing on various devices and screen resolutions.
- The snowfall effect is implemented efficiently to minimize performance impact. The `context.clearRect` method clears the canvas at each frame before redrawing the snowflakes, preventing visual artifacts and optimizing performance.
- The snowflakes have a semi-transparent appearance, giving them a delicate and ethereal look. The `context.fillStyle` property sets the color and opacity of the snowflakes. You can modify the RGBA values to adjust the color and transparency of the snowflakes according to your preferences.
How To Add Snowfall Effect On Any WebsiteÂ
For adding snowfall effect on your website follow these simple steps
- Go To Your Blogger Dashboard
- Now Open Layout Option By Clicking On Three Line
- Now Add A HTML Javascript Gadget On Bottom Side Or In Sidebar
- Copy This Snowfall Effect Code And Paste On Content Don’t Write Anything In Title
- Now Save This Gadget And Refresh Your Website
- Congratulations 🎉 You Have Successfully Inplanted Snowfall Effect On Your Website
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
Date.now||(Date.now=function(){return(new Date).getTime()}),function(){"use strict";for(var t=["webkit","moz"],e=0;e<t.length&&!window.requestAnimationFrame;++e){var i=t[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var s=0;window.requestAnimationFrame=function(t){var e=Date.now(),i=Math.max(s+16,e);return setTimeout(function(){t(s=i)},i-e)},window.cancelAnimationFrame=clearTimeout}}(),function(t){t.snowfall=function(e,i){function s(s,n,a,h,r){this.id=r,this.x=s,this.y=n,this.size=a,this.speed=h,this.step=0,this.stepSize=o(1,10)/100,i.collection&&(this.target=w[o(0,w.length-1)]);var l=null;i.image?(l=t(document.createElement("img")),l[0].src=i.image):(l=t(document.createElement("div")),l.css({background:i.flakeColor})),l.attr({"class":"snowfall-flakes",id:"flake-"+this.id}).css({width:this.size,height:this.size,position:i.flakePosition,top:this.y,left:this.x,fontSize:0,zIndex:i.flakeIndex}),t(e).get(0).tagName===t(document).get(0).tagName?(t("body").append(l),e=t("body")):t(e).append(l),this.element=document.getElementById("flake-"+this.id),this.update=function(){if(this.y+=this.speed,this.y>d-(this.size+6)&&this.reset(),this.element.style.top=this.y+"px",this.element.style.left=this.x+"px",this.step+=this.stepSize,this.x+=S===!1?Math.cos(this.step):S+Math.cos(this.step),i.collection&&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 t=this.target.element.getContext("2d"),e=this.x-this.target.x,s=this.y-this.target.y,n=this.target.colData;if(void 0!==n[parseInt(e)][parseInt(s+this.speed+this.size)]||s+this.speed+this.size>this.target.height)if(s+this.speed+this.size>this.target.height){for(;s+this.speed+this.size>this.target.height&&this.speed>0;)this.speed*=.5;t.fillStyle="#fff",void 0==n[parseInt(e)][parseInt(s+this.speed+this.size)]?(n[parseInt(e)][parseInt(s+this.speed+this.size)]=1,t.fillRect(e,s+this.speed+this.size,this.size,this.size)):(n[parseInt(e)][parseInt(s+this.speed)]=1,t.fillRect(e,s+this.speed,this.size,this.size)),this.reset()}else this.speed=1,this.stepSize=0,parseInt(e)+1<this.target.width&&void 0==n[parseInt(e)+1][parseInt(s)+1]?this.x++:parseInt(e)-1>0&&void 0==n[parseInt(e)-1][parseInt(s)+1]?this.x--:(t.fillStyle="#fff",t.fillRect(e,s,this.size,this.size),n[parseInt(e)][parseInt(s)]=1,this.reset())}(this.x>c-f||this.x<f)&&this.reset()},this.reset=function(){this.y=0,this.x=o(f,c-f),this.stepSize=o(1,10)/100,this.size=o(100*i.minSize,100*i.maxSize)/100,this.speed=o(i.minSpeed,i.maxSpeed)}}function n(){for(l=0;l<h.length;l+=1)h[l].update();p=requestAnimationFrame(function(){n()})}var a={flakeCount:35,flakeColor:"#ffffff",flakePosition:"absolute",flakeIndex:999999,minSize:1,maxSize:2,minSpeed:1,maxSpeed:5,round:!1,shadow:!1,collection:!1,collectionHeight:40,deviceorientation:!1},i=t.extend(a,i),o=function(t,e){return Math.round(t+Math.random()*(e-t))};t(e).data("snowfall",this);var h=[],r=0,l=0,d=t(e).height(),c=t(e).width(),f=0,p=0;if(i.collection!==!1){var m=document.createElement("canvas");if(m.getContext&&m.getContext("2d"))for(var w=[],g=t(i.collection),u=i.collectionHeight,l=0;l<g.length;l++){var x=g[l].getBoundingClientRect(),z=t("<canvas/>",{"class":"snowfall-canvas"}),v=[];if(x.top-u>0){t("body").append(z),z.css({position:i.flakePosition,left:x.left+"px",top:x.top-u+"px"}).prop({width:x.width,height:u});for(var y=0;y<x.width;y++)v[y]=[];w.push({element:z.get(0),x:x.left,y:x.top-u,width:x.width,height:u,colData:v})}}else i.collection=!1}for(t(e).get(0).tagName===t(document).get(0).tagName&&(f=25),t(window).bind("resize",function(){d=t(e)[0].clientHeight,c=t(e)[0].offsetWidth}),l=0;l<i.flakeCount;l+=1)r=h.length,h.push(new s(o(f,c-f),o(0,d),o(100*i.minSize,100*i.maxSize)/100,o(i.minSpeed,i.maxSpeed),r));i.round&&t(".snowfall-flakes").css({"-moz-border-radius":i.maxSize,"-webkit-border-radius":i.maxSize,"border-radius":i.maxSize}),i.shadow&&t(".snowfall-flakes").css({"-moz-box-shadow":"1px 1px 1px #555","-webkit-box-shadow":"1px 1px 1px #555","box-shadow":"1px 1px 1px #555"});var S=!1;i.deviceorientation&&t(window).bind("deviceorientation",function(t){S=.1*t.originalEvent.gamma}),n(),this.clear=function(){t(e).children(".snowfall-flakes").remove(),t(".snowfall-canvas").remove(),h=[],cancelAnimationFrame(p)}},t.fn.snowfall=function(e){return"object"==typeof e||void 0==e?this.each(function(){new t.snowfall(this,e)}):"string"==typeof e?this.each(function(){var e=t(this).data("snowfall");e&&e.clear()}):void 0}}(jQuery);
</script>
<script>
$(document).snowfall({flakeCount : 100, maxSpeed : 10, flakeColor: "white", minSize: 1, maxSize: 5, round: true});
</script
