Chủ Nhật, 6 tháng 11, 2016

Cách tạo hiệu ứng tuyết rơi cho Blogspot

20:36  oneillhekhih6165  No comments

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>
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é.

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>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDljKpJQx25FzmaRQJ57ml0WN9-BoWN6gM9P99fhAwYb_MsT2eali2KFqxUGWvzbDyZb5mTwRsEOQMQquHaKofflmhVTePS-8KxklLuzkSSNi7T_ps82NwqqQ2FQbDJLTTk6Iss4CT_Y/s150/top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGuTLzl3d-erqMIFsZR2ydpC1biV43VeogadRFPUItGfAfmM6jWKZHAoHhj8RtSJmzwOuCGEbjb2l4AKimV5HNmv64Vh4G4SCm1a9Qf6VXCp-BjDn9sFGue_PYZCOHRjJoOl-shRycqPo/s150/top-right.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://smartbb.googlecode.com/svn/trunk/dgm-footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK3DehDejb_RKUw8dZTOK4bJXET2PTxC4O69apS1wyAxuY5icX0j-8r5YmL3_TkNx1kDQc-BJfPI11WmNgspdMON7v9YNyfE4PdIl4C4Yn9Qab4Gfy9C4pZRJPYVQCQJ7qT0-37zX9xaw/s180/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>
Lưu lại và xem thành quả.

Vậy là bạn đã tạo được hiệu ứng tuyết rơi cho Blogspot rồi đó, hãy trang trí một ít cho blog của mình để đón chào Noel nhé.

Posted in:

0 nhận xét:

Đăng nhận xét