Tạo hiệu ứng tuyết rơi theo chuột trang trí Noel cho Blogspot
/ lúc / 15 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
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ác Sĩ Windows.
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.

15 nhận xét:

Nguyễn Lương Duy nói...

Hãy lắm anh :v mà em ghét cái tuyết rơi vl ra

Trường Nguyễn nói...

Ặc, ghét sao lại khen hay :v
Nhìn cũng đẹp mà!

Tính Getter nói...

Trường đẹp trai :v

Star Cường IT ­ nói...

Cài quảng cáo cố định nên khi onl bằng đt bị che mất phần footer.

Trường Nguyễn nói...

Không che nhé.

Trường Nguyễn nói...

Quỷ sứ hà

Star Cường IT ­ nói...

Vừa mới sửa lại kìa.

Trường Nguyễn nói...

Vãi trước khi cài đã test rồi nhé.
Sáng giờ đi học sửa gì trời

Huỳnh Hoài Bảo nói...

:v đẹp quá đê

Trường Nguyễn nói...

Đẹp thiệt :))

Cọp Art nói...

sao mình chèn vào k được nhỉ :3

Niệm Style Blog nói...

Cách tốt nhất là khỏi chèn nữa :v

Trường Nguyễn nói...

Bạn chèn vào giữa cặp thẻ <!-- --> thì làm sao hiện.

Văn Huy SYSTEM nói...

Ctrl + c Chuyển sang http://www.shafou.com/ :v

Trường Nguyễn nói...

Giật mình :v
https://media.tenor.co/images/aa440153baa6f34405ef831cbf58531c/tenor.gif

Đăng nhận xét