[32]
Thủ thuật: Hiệu ứng hoa, lá, tuyết rơi,... trên nền blog
Nguồn: Sưu tầm



Giới thiệu: Nếu một ngày bạn thấy blog mình quá đơn điệu, và muốn thêm một chút sinh khí cho blog, như tuyết rơi trên blog, lá rơi, hoa rơi,… thì thủ thuật sau sẽ giúp bạn việc này. Thủ thuật thích hợp cho những ai muốn làm đẹp hơn cho blog.

Lưu ý: Ở lần load trang đầu tiên, ảnh sẽ rơi một lượt từ đầu trang cho đến cuối trang thì mới rơi tiếp lại từ đầu. Sau đó sẽ rơi liên tục, đều đặn và riêng lẻ, trông sẽ tự nhiên hơn và đẹp hơn lần rơi đầu tiên.


CÁCH THỰC HIỆN

1. Đăng nhập Blogger
2. Chọn: Bố cục > Thêm tiện ích

- Chọn thêm tiện ích HTML/Javascript và dán đoạn mã sau vào:

<!-- Hiệu ứng hoa, lá, tuyết rơi,... cho blog -->
<script type='text/javascript'>
//<![CDATA[
var snowsrc="LINK HÌNH" // Thay Link hình của bạn vào đây
var no = 20; // Số ảnh rơi trên blog
var hidesnowtime = 0; // Số giây ảnh biến mất sau khi rơi
var snowdistance = "pageheight"; // Có thể thay đổi giá trị pageheight thành windowheight 

///////////Stop Config//////////////////////////////////

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>

3. Save. (Lưu)


THE END.

Thủ thuật tương tự:
» Chèn nền Flash (hoa rơi, tuyết rơi,…) cho blog
» Hiệu ứng tuyết rơi cho blog