| Mở đầu
Chào mọi người. Hôm nay khaiphinguyen xin chia sẻ với các bạn code trang trí ngày tết cho blog.
Thật sự code này được chia sẻ trên mạng rất nhiều, mình muốn đem về gộp lại thành một bài viết có đầy đủ chi tiết nhất cho mọi người.
Ở đây mình có chia sẻ 2 code trang trí đẹp mắt cho mọi người
Hiệu ứng bắn pháo bông
Hiệu ứng hoa mai rơi tự động
| Hướng dẫn
Đầu tiên là hiệu ứng bắn pháo bông.
Bước 1 : Vào Blogger, đi tới Chủ đề và chọn Chỉnh sửa HTML, bấm tổ hợp phím Ctrl + F và tìm thẻ </head>, Chèn code bên dưới vào và bấm Lưu nhé.
<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>
|
Hiệu ứng hoa mai rơi tự độngCode hoa mai rơi cũng tương tự như code ở trên nhé, vẫn tìm tới thẻ </head> và dán toàn bộ code bên dưới vào là được. |
<script type='text/javascript'> //<![CDATA[ var pictureSrc ="https://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png"; //the location of the snowflakes var pictureWidth = 15; //the width of the snowflakes var pictureHeight = 15; //the height of the snowflakes var numFlakes = 10; //the number of snowflakes var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms) var lrFlakes = 10; //the speed that the snowflakes should swing from side to side if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; } //draw the snowflakes for( var x = 0; x < numFlakes; x++ ) { if( document.layers ) { //releave NS4 bug document.write(''); } else { document.write(' '); } } //calculate initial positions (in portions of browser window size) var xcoords = new Array(), ycoords = new Array(), snFlkTemp; for( var x = 0; x < numFlakes; x++ ) { xcoords[x] = ( x + 1 ) / ( numFlakes + 1 ); do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() ); } while( typeof( ycoords[snFlkTemp] ) == 'number' ); ycoords[snFlkTemp] = x / numFlakes; } //now animate function flakeFall() { if( !getRefToDivNest('snFlkDiv0') ) { return; } var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0; //find screen settings for all variations. doing this every time allows for resizing and scrolling if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else { if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) { scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else { if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } } if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else { if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else { if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } } } //move the snowflakes to their new position for( var x = 0; x < numFlakes; x++ ) { if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; } var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; } if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0; divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix; divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix; ycoords[x] += downSpeed; } } //DHTML handlers function getRefToDivNest(divName) { if( document.layers ) { return document.layers[divName]; } //NS4 if( document[divName] ) { return document[divName]; } //NS4 also if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera) if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4 return false; } window.setInterval('flakeFall();',100); //]]> </script>
| Lời kết
Chỉ như vậy thôi là blog của mình đã được trang trí một cách đẹp đẽ và đơn giản rồi đúng không. Cảm ơn các bạn đã theo dõi bài viết này, chúc các bạn thực hiện thành công nhé.
tương tác cái nèee
Trả lờiXóaTương tác kk
XóaCode xịn bên đây nè ông bạn Chia sẻ code trang trí tết 2022 cho blog/website độc đáo, hấp dẫn
Trả lờiXóaOkee, cảm ơn ông nhiều nha
XóaXịn quá ta
Trả lờiXóaNice Post ) ;
Trả lờiXóaThank bro!
Xóa