Trang trí noel cho website

Share full code trang trí giáng sinh cho web

   

Tèn tén ten . Vậy là noel 2016 đã đến trước thềm rồi .

Các bạn đã chuẩn bị gì cho website để đón chào noel 2016 chưa ?

Hôm nay PRT sẽ share cho các bạn Full code trang trí noel cho website ,trang trí giáng sinh cho web đảm bảo đẹp lung linh , reponsive trên tất cả các thiết bị nhé !

Xem trước Demo có ưng ý không nhé

Click xem demo

Trong bộ code này bao gồm

  • Bộ chuông đủ màu phía trên header 
  • Chuông trang trí cho 2 góc trên cùng của website.
  • Cây thông và lớp tuyết phủ phía dưới footer.
  • Hiệu ứng tuyết rơi lung linh trong website.
  • Ông già noel bay tứ tung trong website .

 

Bắt đầu nhé !

1 – Copy đoạn code bên dưới sau đó tìm đến thẻ đóng mở <head></head> của website và bỏ vào.

<script type=’text/javascriptsrc=’http://prthuonghieu.net/noel/js/snow.mini.js‘></script>

Xong chúng ta quay ra trang chủ sẽ thấy có hiệu ứng tuyết rơi rồi nhé !

2 – Tiếp đến chúng ta tìm thẻ đóng mở <body></body> copy đoạn code sau bỏ vào trong đó

<script type=’text/javascript’>
//<![CDATA[
document.write(‘<style type=”text/css”>body{background:#f5465a;padding-bottom:150px}</style><img style=”position:fixed;z-index:9999;top:0;left:0″ src=”http://prthuonghieu.com/images/noel/top-left.png”/><img style=”position:fixed;z-index:9999;top:0;right:0″ src=”http://prthuonghieu.com/images/noel/top-right.png”/><div style=”position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(http://prthuonghieu.com/images/noel/footer-christmas.png) repeat-x bottom left;”></div><img style=”position:fixed;z-index:9999;bottom:30px;left:30px” src=”http://prthuonghieu.com/images/noel/bottom-left.png”/>’);var no=100;var hidesnowtime=0;var snowdistance=’pageheight’;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;var am,stx,sty;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();for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random();if(ie4up||ns6up){document.write(‘<div id=”dot’+i+'” style=”POSITION:absolute;Z-INDEX:’+i+’;VISIBILITY:visible;TOP:15px;LEFT:15px;”><span style=”font-size:18px;color:#fff”>*</span></div>’)}}function snowIE_NS6(){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){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>

Ok. Làm xong những bước trên là chúng ta đã có 1 bộ chuông trag trí cho Header và footer website rồi đó.

Thử xem bộ code noel cho website đã hoạt động chưa nhé !

3 – Thêm hiệu ứng ông già noel bay tứ tung trên nền website cho Trang chủ.

Chúng ta dowload bộ code noel này về nhé (Click vào biểu tượng để tải về)

Giải nén thư mục vừa tải về chúng ta được foder tên là Noel .

Chúng ta upload foder đó lên thư mục root hoặc Public_html  (ngang hàng với file index của website).

4 –  Tìm đến thẻ đóng mở <head></head> thêm đoạn code sau vào trong đó

<script src=”noel/halo.js”></script>

Cuối cùng chúng ta save nó lại . F5 website và thưởng thức thành quả của mình nhé !


Trong quá trình làm không hiểu chỗ nào thì các bạn để lại comment admin sẽ hưỡng dẫn tận tình cho các bạn.

Nếu thấy bài hay và có ích thì like vè share cho các bạn khác cùng trang hoàng website thật đẹp trong ngày noel nhé

  • Qua bài viết : Trang trí noel cho website này admin và tất cả thành viên của công ty PRT xin gửi đến tất cả mọi người lời chúc giáng sinh an lành hạnh phúc  và ấm áp.

Merry Christmas 

trang-tri-noel-cho-website

 

Trang trí noel cho website
5 (100%) 35 votes

Comments