Sử dụng hiệu ứng tuyết rơi để trang trí blog

Tình hình là sắp đến Giáng Sinh 2012, đi đâu cũng thấy chỗ nào cũng chuẩn bị trang trí đón Noel, ngay cả trên Internet cũng không ngoại lệ, các 4rum lớn cũng đã bắt đầu công việc trang trí cho ngôi nhà chung dành cho mọi người ở trên mạng, blog mình cũng muốn đua đòi nên cũng đã trang trí một số thứ....Tiếc là năm nay mình trang trí đã không sử dụng hiệu ứng tuyết rơi bởi vì nó giật quá chịu thua. Thôi, không dài dòng nữa, vào luôn chủ đề chính, hôm nay mình giới thiệu các bạn hiệu ứng tuyết sử dụng ảnhkhông sử dụng ảnh. Còn muốn trang trí như mình thì chờ TUT nhéthẹn thùng.


I. Hiệu ứng tuyết rơi không sử dụng ảnh.

Bước 1: Download file javascript dưới, giải nén và úp lên Google Code.
Bước 2: Sử dụng đoạn code bên dưới vào trên thẻ </body>.
<script type="text/javascript" src="snow.js"></script>
Thay snow.js bằng đường link mà bạn vừa úp file này lên Google Code.

IIHiệu ứng tuyết rơi sử dụng ảnh.

Tương tự với hiệu ứng không sử dụng ảnh, hiệu ứng này cũng làm theo 2 bước như sau:

Bước 1: Lưu các ảnh GIF hình bông tuyết này về máy ( Chuột phải > Save as ):   

Bước 2: Sử dụng đoạn code bên dưới vào trên thẻ </body>.

<script type="text/javascript">
  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600;

  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }
  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
    snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>

snow.gif : Thay đường dẫn file ảnh vào đây.

Vậy là xong rồi đó. Chúc thành công

Nguồn: Dynamicdrive
Sử dụng hiệu ứng tuyết rơi để trang trí blog Sử dụng hiệu ứng tuyết rơi để trang trí blog Reviewed by Hoàng Quang on 12/06/2012 Rating: 5