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.
Cùng xem và thực hiện nào!
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ẻ
Bước 3. Lưu mẫu.
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.
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="•",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
Hashtag:
#Tất Cả
#Thủ Thuật Blogger
hic hic :(
Trả lờiXóaWow hay quá ^^
Trả lờiXóanice
Trả lờiXóaVery good
Trả lờiXóaChắc lag lắm :v
Trả lờiXóaNhiề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óahi
Trả lờiXóaĐể tuyết rơi vài bữa nhìn chán lại tháo :v
Trả lờiXóaEm cũng thấy chán nhưng mà trang trí vậy để có không khí noel thôi :v
XóaĐem 25 sẽ có tuyết rơi trên blog :V
Trả lờiXóaĐọc bài này lần 2 :v
Trả lờiXóaĐơn giản vì hay thì share về cho anh em đọc =))
XóaĐẹp đấy :)
Trả lờiXóaNày nó có làm lag blog hay giảm thời gian load không anh
Trả lờiXóaChắc có :v không chắc lắm, nhưng mà vẫn lướt web mượt :)
XóaHay quá anh ơi :3
Trả lờiXóaTemp đẹp quá anh ơi
Trả lờiXóaThi cư xong rồi bắt đầu viết bài đi em!
Trả lờiXóaChào ông
XóaBài viết hay đó :) Website đẹp thật :)
Trả lờiXóaMấ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óaThi xong rồi mà nghĩ ra ý tưởng gì là ng khác đăng bài rồi ... :(
XóaThi xong chưa người anh em :) Liên kết nổi bật đẹp đấy
Trả lờiXóaThi xong rồi Hưng nhưng mà đang suy nghĩ nhức não để ra bài viết mới.
Xóaphải ra chứ
Xóa