Javascript code hiệu ứng pháo hoa cho blogspot

Hôm nay, trong bài viết này, chúng ta sẽ tìm hiểu Cách thêm hiệu ứng pháo hoa năm mới bằng Javascript vào trang web Blogger.

Javascript code hiệu ứng pháo hoa cho blogspot.

Thật ra là Javascript code hiệu ứng pháo hoa này chủ yếu để cho có không khí mùa xuân tí thôi chứ cũng chả ai xài nhiều. Ngày xưa thì phổ biến nhưng Blogspot bây giờ người ta ưa chuộng đơn giản, tối ưu hóa hơn là màu mè. Nhưng mà thôi úp bài cũ cho vui vậy!

Gợi ý: Tạo hiệu ứng tuyết rơi bằng CSS3 cho blogspot hoàn toàn không gây giật lag

Code hiệu ứng pháo hoa cho blogspot

Để thực hiện tạo một hiệu ứng này cho blogspot thì hết sức dễ dàng. Các bạn làm như sau:

Chèn trực tiếp code dưới đây lên trước thẻ đóng </body>:

<script type="text/javascript">
var bits=90;var speed=33;var bangs=7;var colours=new Array("#03f","#f03","#fff","#f7efa1","#0cf","#f93","#f0c","#fff");var bangheight=new Array();var intensity=new Array();var colour=new Array();var Xpos=new Array();var Ypos=new Array();var dX=new Array();var dY=new Array();var stars=new Array();var decay=new Array();var swide=800;var shigh=600;var boddie;window.onload=function(){if(document.getElementById){var i;boddie=document.createElement("div");boddie.style.position="fixed";boddie.style.top="0px";boddie.style.left="0px";boddie.style.overflow="visible";boddie.style.width="1px";boddie.style.height="1px";boddie.style.backgroundColor="transparent";document.body.appendChild(boddie);set_width();for(i=0;i<bangs;i++){write_fire(i);launch(i);setInterval('stepthrough('+i+')',speed);}}}
function write_fire(N){var i,rlef,rdow;stars[N+'r']=createDiv('|',12);boddie.appendChild(stars[N+'r']);for(i=bits*N;i<bits+bits*N;i++){stars[i]=createDiv('*',13);boddie.appendChild(stars[i]);}}
function createDiv(char,size){var div=document.createElement("div");div.style.font=size+"px monospace";div.style.position="absolute";div.style.backgroundColor="transparent";div.appendChild(document.createTextNode(char));return(div);}
function launch(N){colour[N]=Math.floor(Math.random()*colours.length);Xpos[N+"r"]=swide*0.5;Ypos[N+"r"]=shigh-5;bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];if(dX[N+"r"]>1.25)stars[N+"r"].firstChild.nodeValue="/";else if(dX[N+"r"]<-1.25)stars[N+"r"].firstChild.nodeValue="\\";else stars[N+"r"].firstChild.nodeValue="|";stars[N+"r"].style.color=colours[colour[N]];}
function bang(N){var i,Z,A=0;for(i=bits*N;i<bits+bits*N;i++){Z=stars[i].style;Z.left=Xpos[i]+"px";Z.top=Ypos[i]+"px";if(decay[i])decay[i]--;else A++;if(decay[i]==15)Z.fontSize="10px";else if(decay[i]==7)Z.fontSize="2px";else if(decay[i]==1)Z.visibility="hidden";Xpos[i]+=dX[i];Ypos[i]+=(dY[i]+=1.25/intensity[N]);}
if(A!=bits)setTimeout("bang("+N+")",speed);}
function stepthrough(N){var i,M,Z;var oldx=Xpos[N+"r"];var oldy=Ypos[N+"r"];Xpos[N+"r"]+=dX[N+"r"];Ypos[N+"r"]-=4;if(Ypos[N+"r"]<bangheight[N]){M=Math.floor(Math.random()*3*colours.length);intensity[N]=5+Math.random()*4;for(i=N*bits;i<bits+bits*N;i++){Xpos[i]=Xpos[N+"r"];Ypos[i]=Ypos[N+"r"];dY[i]=(Math.random()-0.5)*intensity[N];dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;decay[i]=25+Math.floor(Math.random()*25);Z=stars[i];if(M<colours.length)Z.style.color=colours[i%2?colour[N]:M];else if(M<2*colours.length)Z.style.color=colours[colour[N]];else Z.style.color=colours[i%colours.length];Z.style.fontSize="20px";Z.style.visibility="visible";}
bang(N);launch(N);}
stars[N+"r"].style.left=oldx+"px";stars[N+"r"].style.top=oldy+"px";}
window.onresize=set_width;function set_width(){var sw_min=999999;var sh_min=999999;if(document.documentElement&&document.documentElement.clientWidth){if(document.documentElement.clientWidth>0)sw_min=document.documentElement.clientWidth;if(document.documentElement.clientHeight>0)sh_min=document.documentElement.clientHeight;}
if(typeof(self.innerWidth)!="undefined"&&self.innerWidth){if(self.innerWidth>0&&self.innerWidth<sw_min)sw_min=self.innerWidth;if(self.innerHeight>0&&self.innerHeight<sh_min)sh_min=self.innerHeight;}
if(document.body.clientWidth){if(document.body.clientWidth>0&&document.body.clientWidth<sw_min)sw_min=document.body.clientWidth;if(document.body.clientHeight>0&&document.body.clientHeight<sh_min)sh_min=document.body.clientHeight;}
if(sw_min==999999||sh_min==999999){sw_min=800;sh_min=600;}
swide=sw_min;shigh=sh_min;}
</script>

Hoặc có thể tạo một widget Javascript/HTML ở bố cục và chèn nó vào (không cần mã hóa code). Sở dĩ làm như vậy để giảm tải độ nặng khi sử dụng nhiều Js, hạn chế ảnh hưởng đến SEO.

Còn muốn nó hiển thị pháo hoa ở đâu trên Blog của mình thì áp dụng các thẻ điều kiện này vào nha!

Nâng cao

Ở đây mình sẽ để một ví dụ về hiệu ứng pháo hoa chuyên sâu có cả âm thanh rất sống động để tham khảo, chưa đưa vào Bloggeg thế nào thì mình cũng chưa biết :v

See the Pen Firework Simulator v2 by Caleb Miller (@MillerTime) on CodePen.

Anh em nào làm được pháo hoa có âm thanh như demo trên thì cho cái tips hướng dẫn nha, cảm ơn anh em đã ghé xem!