Giáng sinh cũng sắp đến rồi, không khí Noel cũng tràn ngập các con đường ở những thành phố lớn. Và cũng rất nhiều website, đã thay đổi để tạo nên một không khí noel hòa cùng với cuộc sống. Dù sự thay đổi đó là lớn như thay đổi hoàn toàn giao diện web, hay chỉ nhỏ và đơn giản như tạo tuyết rơi.
Vì thế, cũng nên hưởng ứng Giáng sinh, nhưng ở cấp độ nhỏ hơn, chỉ là tạo tuyết rơi trên chính Blogspot của các bạn. Vì thế, hôm nay mình sẽ hướng dẫn các bạn cách tạo tuyết rơi cho blog của mình để chào đón mùa Noel sắp đến. Cùng theo dõi nhé:
Cách tạo tuyết rơi cho Blogspot
_CTPG_ sẽ đưa ra nhiều định dạng tuyết rơi khác nhau cho các bạn tùy ý lựa chọn. Thích cái nào thì chọn cái đó.
Hiệu ứng tuyết rơi 1
Hiệu ứng tuyết rơi này khá đơn giản, chỉ là những cục tuyết rơi nhỏ không góc cạnh, nhìn như chấm tròn màu trắng vậy đó.
– Thêm đoạn code js sau vào bên trong thẻ <head>:
1 | <script src=’http://static.tumblr.com/2w7y46r/xtmlvfnoc/snowstorm.js’/> |
Và lưu lại, chỉ đơn giản như vậy là bạn đã có tuyết rơi trên web của mình rồi đó.
– Ngoài ra, nếu muốn tùy chỉnh nhiều hơn thì các bạn có thể thêm đoạn code nhỏ bên dưới đây vào sau nó và tùy chỉnh theo ý muốn:
1 2 3 4 5 | <script type=”text/javascript”> snowStorm.snowColor = ‘#fff’; // Màu của tuyết rơi snowStorm.flakesMaxActive = 96; // Số lượng tuyết tối đa trên màn hình snowStorm.snowStick = true; // Nếu chuyển thành false thì tuyết sẽ không đọng ở cuối trang web </script> |
Hiệu ứng tuyết rơi 2
Đây là hiệu ứng tạo ra tuyết hình sao, tuyết nhỏ, rơi khá chậm và không dày đặc.
– Thêm đoạn code này vào bên trong thẻ <body>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <SCRIPT type=”text/javascript”> //<![CDATA[ // Số bông tuyết (Không khuyến khích nhiều hơn 30-40) var snowmax=35 // Tùy chọn màu sắc cho tuyết, có thể nhiều màu khác nhau như bên dưới var snowcolor=new Array(“#aaaacc”,”#ddddff”,”#ccccdd”,”#f3f3f3″,”#f0ffff”) // Thiết lập font chữ để tạo ra tuyết, vì các font chữ khác nhau thì hình dạng dấu * cũng khác nhau var snowtype=new Array(“Times”,”Arial”,”Times”,”Verdana”) // Thiết lập ký tự tạo ra tuyết (Khuyến khích: *) var snowletter=”*” // Thiết lập tốc độ rơi xuống (Đề nghị trong khoảng 0.3-2) var sinkspeed=0.6 // Kích thước tối đa của bông tuyết var snowmaxsize=30 // Kích thước tối thiểu của bông tuyết var snowminsize=8 // Thiết lập vùng tuyết rơi // 1 cho toàn bộ trang web, 2 cho phần bên trái // 3 cho phần trung tâm, 4 cho phần bên phải var snowingzone=1 /////////////////////////////////////////////////////////////////////////// // OK /////////////////////////////////////////////////////////////////////////// // Không được chỉnh code ở bên dưới var snow=new Array() var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.scrollHeight marginright = document.body.clientWidth-15 } else if (ns6) { marginbottom = document.body.scrollHeight marginright = window.innerWidth-15 } var snowsizerange=snowmaxsize-snowminsize for (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i]=document.getElementById(“s”+i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)] snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size+’px’; snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].style.zIndex=1000 snow[i].sink=sinkspeed*snow[i].size/5 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx+’px’; snow[i].style.top=snow[i].posy+’px’; } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+’px’; snow[i].style.top=snow[i].posy+’px’; if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=0 } } var timer=setTimeout(“movesnow()”,50) } for (i=0;i<=snowmax;i++) { document.write(“<span id=’s”+i+”‘ style=’position:absolute;top:-“+snowmaxsize+”‘>”+snowletter+”</span>”) } if (browserok) { window.onload=initsnow } //]]> </SCRIPT> |
Các thông số các bạn có thể điều chỉnh theo ý thích của mình dựa vào mấy cái chú thích mình ghi trong đoạn code trên nhé.
Xem thêm: Template Giáng sinh cho Blogspot
Hiệu ứng tuyết rơi 3
Đây là hiệu ứng tạo tuyết rơi nhanh, dày đặc và rất to. Có thể thiết lập tự động tắt hiệu ứng sau một thời gian chỉ định. Và có thể tùy ý cấu hình hình dạng của bông tuyết khi rơi xuống.
– Thêm đoạn code bên dưới đây vào thẻ <body>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <SCRIPT type="text/javascript" language="JavaScript1.2"> //<![CDATA[ //Pre-loads your image/s below //Thay đổi đường dẫn hình ảnh tuyết nếu bạn muốn tuyết hình khác grphcs=new Array(6) Image0=new Image(); Image0.src=grphcs[0]="http://rainbow.arch.scriptmania.com/scripts/bg/snow1.gif"; Image1=new Image(); Image1.src=grphcs[1]="http://rainbow.arch.scriptmania.com/scripts/bg/snow2.gif" Image2=new Image(); Image2.src=grphcs[2]="http://rainbow.arch.scriptmania.com/scripts/bg/snow3.gif" Image3=new Image(); Image3.src=grphcs[3]="http://rainbow.arch.scriptmania.com/scripts/bg/snow4.gif" Image4=new Image(); Image4.src=grphcs[4]="http://rainbow.arch.scriptmania.com/scripts/bg/snow5.gif" Image5=new Image(); Image5.src=grphcs[5]="http://rainbow.arch.scriptmania.com/scripts/bg/snow6.gif" //Smoothness depends on image file size, //the smaller the size the more you can use! // Configure below - change number of snow to render Amount=40; Ypos=new Array(); Xpos=new Array(); Speed=new Array(); Step=new Array(); Cstep=new Array(); ns=(document.layers)?1:0; ns6=(document.getElementById&&!document.all)?1:0; var Stop = false; if (ns){ for (i = 0; i < Amount; i++){ var P=Math.floor(Math.random()*grphcs.length); rndPic=grphcs[P]; document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>"); } } else{ document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < Amount; i++){ var P=Math.floor(Math.random()*grphcs.length); rndPic=grphcs[P]; document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">'); } document.write('</div></div>'); } WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight; WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth; for (i=0; i < Amount; i++){ Ypos[i] = Math.round(Math.random()*WinHeight); Xpos[i] = Math.round(Math.random()*WinWidth); Speed[i]= Math.random()*5+3; Cstep[i]=0; Step[i]=Math.random()*0.1+0.05; } function fall(){ if (Stop) { clearSnow(); return; } var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight; var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth; var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop; var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft; for (i=0; i < Amount; i++){ sy = Speed[i]*Math.sin(90*Math.PI/180); sx = Speed[i]*Math.cos(Cstep[i]); Ypos[i]+=sy; Xpos[i]+=sx; if (Ypos[i] > WinHeight){ Ypos[i]=-60; Xpos[i]=Math.round(Math.random()*WinWidth); Speed[i]=Math.random()*5+3; } if (ns){ document.layers['sn'+i].left=Xpos[i]; document.layers['sn'+i].top=Ypos[i]+hscrll; } else if (ns6){ document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]); document.getElementById("si"+i).style.top=Ypos[i]+hscrll; } else{ eval("document.all.si"+i).style.left=Xpos[i]; eval("document.all.si"+i).style.top=Ypos[i]+hscrll; } Cstep[i]+=Step[i]; } setTimeout('fall()',20); } window.onload=fall; // ***** Delay FUNCTION HERE ***** setTimeout("Stop=true", 20000); // ***** Delay 1000 = 1 second ***** function clearSnow(){ for (i=0; i < Amount; i++){ if (ns){ document.layers['sn'+i].display='none'; } else if (ns6){ document.getElementById("si"+i).style.display='none'; } else{ eval("document.all.si"+i).style.display='none'; } } } //--> //]]> </SCRIPT> |
Bạn có thể tùy ý tùy chỉnh hình ảnh của bông tuyết, bằng cách thay ảnh khác vào vị trí các hình ảnh bông tuyết mình để ở trên. Và có thể cài đặt thời gian tắt hiệu ứng bằng cách thay đổi con số 20000 kia, 20000 này là 20s nhé.
Chỉ với một trong 3 cách tạo tuyết rơi cho Blogspot này, bạn đã trang hoàng cho website mình một ít không khí Noel rồi đó. Hãy trang trí một ít cho blog của mình để đón chào Noel nhé.
