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 9:52:00 PM Rating: 5

43 comments:

  1. Có mùi Noel rồi đây :D
    P/s : lâu quá mới ghé thăm lại , và cũng lâu rồi mới đụng lại blogger ^^

    ReplyDelete
    Replies
    1. Aha, bác dạo này đi đâu mà biệt mất tăm thế :))

      Delete
  2. Các blogger đang thoái chào! Tính di động và mạng xã hội fb đang là thách thức của anh em blogger ta! hay za thấy nản phết

    ReplyDelete
    Replies
    1. Uh thì kệ nó, FBooker vẫn là Blogger mà :D

      Delete
    2. Đúng là mạng xã hội ra đời làm nhạt dần những blogger nghiệp dư !

      Delete
    3. Với em facebook giống như 1 quán cà phê để tụ tập tui bạn chém gió:)), còn blogger vẫn là my home:)

      Delete
  3. Tình hình là đi đâu cũng thấy giáng sinh rồi :) nên làm cái hiệu ứng cho vui thoai :)

    Cộng đồng blogger chán quá... đanh tính chuyển hướng sang wordpress đây ...

    ReplyDelete
    Replies
    1. Chuyển đi bác, em ủng hộ ;))

      Delete
  4. Có nick yahoo hoặc nick chat nào không nhắn anh cái ... Cần nói chuyện chút đó mà :)

    ReplyDelete
    Replies
    1. Cần gì vậy anh, em ít onl YM!, có gì buzz vào nick: viaiemradi_321

      Delete
  5. Trang trí nhà ấm cúm nhỉ, tiếc là trời quá nóng :(

    ReplyDelete
    Replies
    1. uh`, dự là cuối năm nay đến cận tết mới rét mà :D

      Delete
  6. Bác có mấy cái chuông Noel hay quá
    Hướng dẫn được ko bác :D

    ReplyDelete
    Replies
    1. Có đó bác, bác qua bên blog HHV của nguoiaolam.net là có tut hướng dẫn đó:-"

      Delete
  7. Em làm theo bên đó mà ko có tiếng chuông như của bác :D

    ReplyDelete
    Replies
    1. Bác mở file holiday_bells.js bằng notepad rồi tìm đường link dẫn file .swf rồi sửa lại thì chuông mới kêu :)

      Delete
    2. Đã sửa rồi... nhưng google không hiểu sao cập nhật quá chậm ???

      Delete
  8. ;)) Bạn ơi đụng hàng mất rồi, qua chơi và góp ý cho tớ với nhé. Thank

    ReplyDelete
    Replies
    1. Hàng share tất nhiên phải đụng rồi :)), quan trọng gì đâu bác Tâm;))

      Delete
  9. :-P Ờ bạn nói cũng phải, chúc Giáng sinh vui vẻ và Năm mơi an khang nhé...

    ReplyDelete
  10. Đụng hàng với tớ lun!hihi :))

    ReplyDelete
    Replies
    1. Đụng lắm giờ quen hết rồi bác ạ >:)

      Delete
  11. Trang trí blog mùa giáng sinh. Mời bạn qua chơi và góp ý cho bài đăng mới của tớ nhé. Thank

    ReplyDelete
  12. Đi đâu cũng thấy không khí noel rồi :D

    ReplyDelete
  13. Nhà nào nhà nấy đầu rộn ràng Giáng sinh :-"

    ReplyDelete
    Replies
    1. Nhà mình thì chưa chuẩn bị dc gì cả , ko biết PTS nên cũng bó tay :D

      Delete
    2. Làm tý cho xôm đi bác :-P

      Delete
  14. Paint mà phang chứ cần gì PTS ;))

    ReplyDelete
    Replies
    1. Trình bác ấy còn non và xanh dùng Paint sao đc bác=))

      Delete
  15. Trc giờ hình hiếc cũng toàn dùng Paint :))

    ReplyDelete
    Replies
    1. Paint.net ngon lắm chứ bộ :)

      Delete
    2. Lâu rồi ae blogger mới xôm tụ như thế này >:)

      Delete
    3. Biết tại sao ko, vì anh VLEX đã trở lại và comment đầu tiên cái post này :))
      Cái nút Like đâu rồi nhỉ :D

      Delete
    4. Em bỏ từ khi đổi qua temp này rồi bác:-"

      Delete
  16. Nếu dùng 1 link javarscript thì nhanh....nhưng load chậm lắm..hic hic..blog cứ giật đùng đùng ấy..:-s

    ReplyDelete
    Replies
    1. Đẹp thì phải giật thôi:-", cai tuyết của mình dùng css và chỉ co rơi ở header thôi:D

      Delete
  17. rất vui được làm quen với các bác :)

    ReplyDelete
  18. Giáng sinh đến rồi :)
    Chúc bác có 1 mùa giáng sinh vui vẻ bên gia đình và người thân ^^!

    ReplyDelete
    Replies
    1. Bác cũng vậy nhóe;))

      Delete

- Bạn có thể nhận xét bằng Bất kì tài khoản nào mà bạn muốn.
- Khi viết nhận xét, bạn vui lòng gõ Tiếng Việt có dấu.
- Bạn có thể thêm biểu tượng cảm xúc như trên Facebook.