Tạo Hiệu Ứng Tuyết Rơi Theo Chuột Trang Trí Noel Cho Blogspot

Hello xin chào tất cả các bạn, chào mừng các bạn đã trở lại với blog Bảo Shady Blog.
Tiếp theo series trang trí blog ngày Noel, và bài viết Tạo hiệu ứng tuyết rơi trang trí Noel... trước đó, thì bài viết này mình cũng sẽ chia sẻ cho các bạn một hiệu ứng tuyết rơi, nhưng nó khác với bài viết trước kia là thay vì dùng CSS thì bài viết này dùng hoàn toàn Javascript.

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="&bull;",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.
Nguồn : Bác Sĩ Windows
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    25 nhận xét:

    1. Trả lời
      1. Nhiều CSS thì đương nhiên sẽ lag :V còn ít css thêm cái này vô bình thường thôi mà :"< máy cùi cùi vẫn lươt nhẹ nhàng thôi :v chẳng lag gì hết

        Xóa
    2. Để tuyết rơi vài bữa nhìn chán lại tháo :v

      Trả lờiXóa
      Trả lời
      1. Em cũng thấy chán nhưng mà trang trí vậy để có không khí noel thôi :v

        Xóa
    3. Đem 25 sẽ có tuyết rơi trên blog :V

      Trả lờiXóa
    4. Trả lời
      1. Đơn giản vì hay thì share về cho anh em đọc =))

        Xóa
    5. Này nó có làm lag blog hay giảm thời gian load không anh

      Trả lờiXóa
      Trả lời
      1. Chắc có :v không chắc lắm, nhưng mà vẫn lướt web mượt :)

        Xóa
    6. Temp đẹp quá anh ơi

      Trả lờiXóa
    7. Thi cư xong rồi bắt đầu viết bài đi em!

      Trả lờiXóa
    8. Bài viết hay đó :) Website đẹp thật :)

      Trả lờiXóa
    9. Mấy hôm nay bận chưa ghé thăm đc, giờ ghé mà thấy cái ảnh bìa để hoài hả :)

      Trả lờiXóa
      Trả lời
      1. Thi xong rồi mà nghĩ ra ý tưởng gì là ng khác đăng bài rồi ... :(

        Xóa
    10. Thi xong chưa người anh em :) Liên kết nổi bật đẹp đấy

      Trả lờiXóa
      Trả lời
      1. Thi xong rồi Hưng nhưng mà đang suy nghĩ nhức não để ra bài viết mới.

        Xóa