Tạo hiệu ứng tuyết rơi theo chuột cho blogger

Tuyết rơi - Ảnh minh họa

Hiệu ứng này còn có 1 điểm khác với hiệu ứng trước đó, là khi bạn rê chuột sang trái thì tuyết sẽ đỗ về bên trái, và ngược lại bên phải cũng vậy. Khá hay và thú vị so với hiệu ứng trước đúng không?
Cùng xem và thực hiện nào!

Các bước thực hiện

Bước 1. Truy cập trang chỉnh sửa HTML.

Artikel Terkait

Bước 2. Dán toàn bộ code này vào sau thẻ <body> hoặc trước thẻ </body>

<script type='text/javascript'>//<![CDATA[function SnowStorm(){function e(e,t){return isNaN(t)&&(t=0),Math.random()*e+t}function t(t){return 1==parseInt(e(2),10)?-1*t:t}function i(){s.start(!0)}this.flakesMax=128,this.flakesMaxActive=64,this.animationInterval=33,this.flakeBottom=null,this.targetElement=null,this.followMouse=!0,this.snowColor="#fff",this.snowCharacter="•",this.snowStick=!0,this.useMeltEffect=!0,this.useTwinkleEffect=!1,this.usePositionFixed=!1,this.flakeLeftOffset=0,this.flakeRightOffset=0,this.flakeWidth=8,this.flakeHeight=8,this.vMaxX=5,this.vMaxY=4,this.zIndex=0;var n="undefined"==typeof window.attachEvent?function(e,t,i){return e.addEventListener(t,i,!1)}:function(e,t,i){return e.attachEvent("on"+t,i)},o="undefined"==typeof window.attachEvent?function(e,t,i){return e.removeEventListener(t,i,!1)}:function(e,t,i){return e.detachEvent("on"+t,i)},s=this,l=this;this.timers=[],this.flakes=[],this.disabled=!1,this.active=!1;var a=navigator.userAgent.match(/msie/i),r=navigator.userAgent.match(/msie 6/i),f=a&&(r||navigator.userAgent.match(/msie 5/i)),m=navigator.appVersion.match(/windows 98/i),h=navigator.userAgent.match(/iphone/i),c=a&&"BackCompat"==document.compatMode,d=!!(c||r||h),u=null,v=null,k=null,g=null,y=null,w=null,p=1,x=2,E=6,F=!1,b=function(){try{document.createElement("div").style.opacity="0.5"}catch(e){return!1}return!0}(),H=document.createDocumentFragment();null===s.flakeLeftOffset&&(s.flakeLeftOffset=0),null===s.flakeRightOffset&&(s.flakeRightOffset=0),this.meltFrameCount=20,this.meltFrames=[];for(var I=0;I<this.meltFrameCount;I++)this.meltFrames.push(1-I/this.meltFrameCount);this.randomizeWind=function(){if(y=t(e(s.vMaxX,.2)),w=e(s.vMaxY,.2),this.flakes)for(var i=0;i<this.flakes.length;i++)this.flakes[i].active&&this.flakes[i].setVelocities()},this.scrollHandler=function(){if(g=s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10),isNaN(g)&&(g=0),!F&&!s.flakeBottom&&s.flakes)for(var e=s.flakes.length;e--;)0===s.flakes[e].active&&s.flakes[e].stick()},this.resizeHandler=function(){window.innerWidth||window.innerHeight?(u=window.innerWidth-(a?2:16)-s.flakeRightOffset,k=s.flakeBottom?s.flakeBottom:window.innerHeight):(u=(document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(a?0:8)-s.flakeRightOffset,k=s.flakeBottom?s.flakeBottom:document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight),v=parseInt(u/2,10)},this.resizeHandlerAlt=function(){u=s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset,k=s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight,v=parseInt(u/2,10)},this.freeze=function(){if(s.disabled)return!1;s.disabled=1;for(var e=s.timers.length;e--;)clearInterval(s.timers[e])},this.resume=function(){return s.disabled?(s.disabled=0,void s.timerInit()):!1},this.toggleSnow=function(){s.flakes.length?(s.active=!s.active,s.active?(s.show(),s.resume()):(s.stop(),s.freeze())):s.start()},this.stop=function(){this.freeze();for(var e=this.flakes.length;e--;)this.flakes[e].o.style.display="none";o(window,"scroll",s.scrollHandler),o(window,"resize",s.resizeHandler),f||(o(window,"blur",s.freeze),o(window,"focus",s.resume))},this.show=function(){for(var e=this.flakes.length;e--;)this.flakes[e].o.style.display="block"},this.SnowFlake=function(t,i,n,o){var s=this,l=t;this.type=i,this.x=n||parseInt(e(u-20),10),this.y=isNaN(o)?-e(k)-12:o,this.vX=null,this.vY=null,this.vAmpTypes=[1,1.2,1.4,1.6,1.8],this.vAmp=this.vAmpTypes[this.type],this.melting=!1,this.meltFrameCount=l.meltFrameCount,this.meltFrames=l.meltFrames,this.meltFrame=0,this.twinkleFrame=0,this.active=1,this.fontSize=10+this.type/5*10,this.o=document.createElement("div"),this.o.innerHTML=l.snowCharacter,this.o.style.color=l.snowColor,this.o.style.position=F?"fixed":"absolute",this.o.style.width=l.flakeWidth+"px",this.o.style.height=l.flakeHeight+"px",this.o.style.fontFamily="arial,verdana",this.o.style.overflow="hidden",this.o.style.fontWeight="normal",this.o.style.zIndex=l.zIndex,H.appendChild(this.o),this.refresh=function(){return isNaN(s.x)||isNaN(s.y)?!1:(s.o.style.left=s.x+"px",void(s.o.style.top=s.y+"px"))},this.stick=function(){d||l.targetElement!=document.documentElement&&l.targetElement!=document.body?s.o.style.top=k+g-l.flakeHeight+"px":l.flakeBottom?s.o.style.top=l.flakeBottom+"px":(s.o.style.display="none",s.o.style.top="auto",s.o.style.bottom="0px",s.o.style.position="fixed",s.o.style.display="block")},this.vCheck=function(){s.vX>=0&&s.vX<.2?s.vX=.2:s.vX<0&&s.vX>-.2&&(s.vX=-.2),s.vY>=0&&s.vY<.2&&(s.vY=.2)},this.move=function(){var e=s.vX*p;s.x+=e,s.y+=s.vY*s.vAmp,s.x>=u||u-s.x<l.flakeWidth?s.x=0:0>e&&s.x-l.flakeLeftOffset<0-l.flakeWidth&&(s.x=u-l.flakeWidth-1),s.refresh();var t=k+g-s.y;t<l.flakeHeight?(s.active=0,l.snowStick?s.stick():s.recycle()):(l.useMeltEffect&&s.active&&s.type<3&&!s.melting&&Math.random()>.998&&(s.melting=!0,s.melt()),l.useTwinkleEffect&&(s.twinkleFrame?(s.twinkleFrame--,s.o.style.visibility=s.twinkleFrame&&s.twinkleFrame%2===0?"hidden":"visible"):Math.random()>.9&&(s.twinkleFrame=parseInt(20*Math.random(),10))))},this.animate=function(){s.move()},this.setVelocities=function(){s.vX=y+e(.12*l.vMaxX,.1),s.vY=w+e(.12*l.vMaxY,.1)},this.setOpacity=function(e,t){return b?void(e.style.opacity=t):!1},this.melt=function(){l.useMeltEffect&&s.melting&&s.meltFrame<s.meltFrameCount?(s.meltFrame++,s.setOpacity(s.o,s.meltFrames[s.meltFrame]),s.o.style.fontSize=s.fontSize-s.fontSize*(s.meltFrame/s.meltFrameCount)+"px",s.o.style.lineHeight=l.flakeHeight+2+.75*l.flakeHeight*(s.meltFrame/s.meltFrameCount)+"px"):s.recycle()},this.recycle=function(){s.o.style.display="none",s.o.style.position=F?"fixed":"absolute",s.o.style.bottom="auto",s.setVelocities(),s.vCheck(),s.meltFrame=0,s.melting=!1,s.setOpacity(s.o,1),s.o.style.padding="0px",s.o.style.margin="0px",s.o.style.fontSize=s.fontSize+"px",s.o.style.lineHeight=l.flakeHeight+2+"px",s.o.style.textAlign="center",s.o.style.verticalAlign="baseline",s.x=parseInt(e(u-l.flakeWidth-20),10),s.y=parseInt(-1*e(k),10)-l.flakeHeight,s.refresh(),s.o.style.display="block",s.active=1},this.recycle(),this.refresh()},this.snow=function(){for(var t=0,i=0,n=0,o=null,l=s.flakes.length;l--;)1==s.flakes[l].active?(s.flakes[l].move(),t++):0===s.flakes[l].active?i++:n++,s.flakes[l].melting&&s.flakes[l].melt();t<s.flakesMaxActive&&(o=s.flakes[parseInt(e(s.flakes.length),10)],0===o.active&&(o.melting=!0))},this.mouseMove=function(e){if(!s.followMouse)return!0;var t=parseInt(e.clientX,10);v>t?p=-x+t/v*x:(t-=v,p=t/v*x)},this.createSnow=function(t,i){for(var n=0;t>n;n++)s.flakes[s.flakes.length]=new s.SnowFlake(s,parseInt(e(E),10)),(i||n>s.flakesMaxActive)&&(s.flakes[s.flakes.length-1].active=-1);l.targetElement.appendChild(H)},this.timerInit=function(){s.timers=m?[setInterval(s.snow,3*s.animationInterval),setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval)]},this.init=function(){s.randomizeWind(),s.createSnow(s.flakesMax),n(window,"resize",s.resizeHandler),n(window,"scroll",s.scrollHandler),f||(n(window,"blur",s.freeze),n(window,"focus",s.resume)),s.resizeHandler(),s.scrollHandler(),s.followMouse&&n(document,"mousemove",s.mouseMove),s.animationInterval=Math.max(20,s.animationInterval),s.timerInit()};var M=!1;this.start=function(e){if(M){if(e)return!0}else M=!0;if("string"==typeof s.targetElement){var t=s.targetElement;if(s.targetElement=document.getElementById(t),!s.targetElement)throw new Error('Snowstorm: Unable to get targetElement "'+t+'"')}s.targetElement||(s.targetElement=a?document.body:document.documentElement?document.documentElement:document.body),s.targetElement!=document.documentElement&&s.targetElement!=document.body&&(s.resizeHandler=s.resizeHandlerAlt),s.resizeHandler(),s.usePositionFixed=s.usePositionFixed&&!d,F=s.usePositionFixed,u&&k&&!s.disabled&&(s.init(),s.active=!0)},document.addEventListener?(document.addEventListener("DOMContentLoaded",i,!1),window.addEventListener("load",i,!1)):n(window,"load",i)}var snowStorm=null;snowStorm=new SnowStorm; // bacsiwindows.com//]]></script>

Bước 3. Lưu mẫu.

Tổng kết

Đây là một hiệu ứng theo mình thấy rất đẹp và rất phù hợp để thêm vào Blogspot nhân những ngày cận kề Giáng Sinh này.
Do sử dụng khá nhiều javascript nên có thể sẽ ảnh hưởng ít nhiều đến tốc độ tải trang, bạn cần cân nhắc trước khi áp dụng. Nếu bạn sử dụng một giao diện nhẹ, tải nhanh thì cứ chơi thôi không gì phải lo sợ hết.
*JS đã được nén.