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.
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.
No comments