Cách tạo hiệu ứng tuyết rơi cho Blogspot
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 ngay bên trong thẻ <head>:
<script src='http://static.tumblr.com/2w7y46r/xtmlvfnoc/snowstorm.js'/><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>
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.
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>:
<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>
Hiệu ứng tuyết rơi 3:
 |
| Hiệu ứng tuyết rơi + cây thông noel trên website |
Đây là hiệu ứng có cả cây thông noel và tuyết rơi trên website
Rất đơn giản bạn chỉ việc chèn đoạn code sau vào dưới thẻ <body>
Rất đơn giản bạn chỉ việc chèn đoạn code sau vào dưới thẻ <body>
Cách tạo hiệu ứng tuyết rơi cho Blogspot
Reviewed by PhimHD
on
00:00
Rating:
Reviewed by PhimHD
on
00:00
Rating:
Không có nhận xét nào: