VN-Lives: JavaScript Effect: Tạo hiệu ứng lá rơi trên nền website (create fall leaves on website).

Một hiệu ứng lá rơi làm nên (background) cho trang web khá đẹp, với nó trang web của bạn nhìn sinh động hơn, tuy nhiên chỉ nên áp dụng cho một số trang thông bán và bạn muốn áp dụng một chút hiệu ứng để gây ngạc nhiên cho người dùng thôi, còn nên làm toàn bộ bố cục các tất cả trang web thì không nên.

Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera

JavaScript Effect Source:

----------------
<html>

<head>
<title>vnlives.net</title>

<script language="JavaScript1.2">
//Pre-load your image below!
grphcs = new Array(6)
Image0 = new Image();
Image0.src = grphcs[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHd2pXXr04d-96hCXq8iteNjpp4b8cWiiL90ESyO94GNSgp5j4ZGqWkRtkWDzuRAxQE2d_G7iVKmSugsVNkQmNTeBk-6oMEjcMG0YuPChjIoxrXl-SLXfL50552Exodi_90Eq5QTWP4M/s1600/yellow_leaf.png";
Image1 = new Image();
Image1.src = grphcs[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHd2pXXr04d-96hCXq8iteNjpp4b8cWiiL90ESyO94GNSgp5j4ZGqWkRtkWDzuRAxQE2d_G7iVKmSugsVNkQmNTeBk-6oMEjcMG0YuPChjIoxrXl-SLXfL50552Exodi_90Eq5QTWP4M/s1600/yellow_leaf.png"
Image2 = new Image();
Image2.src = grphcs[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHd2pXXr04d-96hCXq8iteNjpp4b8cWiiL90ESyO94GNSgp5j4ZGqWkRtkWDzuRAxQE2d_G7iVKmSugsVNkQmNTeBk-6oMEjcMG0YuPChjIoxrXl-SLXfL50552Exodi_90Eq5QTWP4M/s1600/yellow_leaf.png"
Image3 = new Image();
Image3.src = grphcs[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHd2pXXr04d-96hCXq8iteNjpp4b8cWiiL90ESyO94GNSgp5j4ZGqWkRtkWDzuRAxQE2d_G7iVKmSugsVNkQmNTeBk-6oMEjcMG0YuPChjIoxrXl-SLXfL50552Exodi_90Eq5QTWP4M/s1600/yellow_leaf.png"
Image4 = new Image();
Image4.src = grphcs[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHd2pXXr04d-96hCXq8iteNjpp4b8cWiiL90ESyO94GNSgp5j4ZGqWkRtkWDzuRAxQE2d_G7iVKmSugsVNkQmNTeBk-6oMEjcMG0YuPChjIoxrXl-SLXfL50552Exodi_90Eq5QTWP4M/s1600/yellow_leaf.png"
Image5 = new Image();
Image5.src = grphcs[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHd2pXXr04d-96hCXq8iteNjpp4b8cWiiL90ESyO94GNSgp5j4ZGqWkRtkWDzuRAxQE2d_G7iVKmSugsVNkQmNTeBk-6oMEjcMG0YuPChjIoxrXl-SLXfL50552Exodi_90Eq5QTWP4M/s1600/yellow_leaf.png"

Amount = 8; //Smoothness depends on image file size, the smaller the size the more you can use!
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
Step = new Array();
Cstep = new Array();
ns = (document.layers) ? 1 : 0;
ns6 = (document.getElementById && !document.all) ? 1 : 0;

if (ns) {
for (i = 0; i < Amount; i++) {
var P = Math.floor(Math.random() * grphcs.length);
rndPic = grphcs[P];
document.write("<LAYER NAME='sn" + i + "' LEFT=0 TOP=0><img src=" + rndPic + "></LAYER>");
}
} else {
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++) {
var P = Math.floor(Math.random() * grphcs.length);
rndPic = grphcs[P];
document.write('<img id="si' + i + '" src="' + rndPic + '" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight = (ns || ns6) ? window.innerHeight : window.document.body.clientHeight;
WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.document.body.clientWidth;
for (i = 0; i < Amount; i++) {
Ypos[i] = Math.round(Math.random() * WinHeight);
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = Math.random() * 5 + 3;
Cstep[i] = 0;
Step[i] = Math.random() * 0.1 + 0.05;
}

function fall() {
var WinHeight = (ns || ns6) ? window.innerHeight : window.document.body.clientHeight;
var WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.document.body.clientWidth;
var hscrll = (ns || ns6) ? window.pageYOffset : document.body.scrollTop;
var wscrll = (ns || ns6) ? window.pageXOffset : document.body.scrollLeft;
for (i = 0; i < Amount; i++) {
sy = Speed[i] * Math.sin(90 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i]);
Ypos[i] += sy;
Xpos[i] += sx;
if (Ypos[i] > WinHeight) {
Ypos[i] = -60;
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = Math.random() * 5 + 3;
}
if (ns) {
document.layers['sn' + i].left = Xpos[i];
document.layers['sn' + i].top = Ypos[i] + hscrll;
} else if (ns6) {
document.getElementById("si" + i).style.left = Math.min(WinWidth, Xpos[i]);
document.getElementById("si" + i).style.top = Ypos[i] + hscrll;
} else {
eval("document.all.si" + i).style.left = Xpos[i];
eval("document.all.si" + i).style.top = Ypos[i] + hscrll;
}
Cstep[i] += Step[i];
}
setTimeout('fall()', 20);
}

window.onload = fall
//-->
</script>

</head>

<body>

<CENTER>

</CENTER>

</body>
</html>
--------------

VN-Lives

JavaScript Effect: Tạo hiệu ứng lá rơi trên nền website (create fall leaves on website).

No comments:

Post a Comment