Một số hiệu ứng tuyết rơi cho trang web [Javascript]

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !
1 - Hiệu ứng 1

- Hiệu ứng tuyết rơi sử dụng dấu * để làm tuyết, có thể thay đổi kích cỡ, màu sắc ở phần config
Copy đoạn code bên dưới và chèn vào dưới thẻ <body> trong trang web của bạn


<script> 
 // CREDITS: // Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved. 
 // Distributed by http://www.hypergurl.com // Permission given to use the script 
 on webpages provided that this notice remains as is. // Set the number of snowflakes 
 (more than 30 - 40 not recommended) var snowmax=35 // Set the colors for the snow. 
 Add as many colors as you like var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD") 
 // Set the fonts, that create the snowflakes. Add as many fonts as you like var 
 snowtype=new Array("Arial Black","Arial Narrow","Times","Comic 
 Sans MS") // Set the letter that creates your snowflake (recommended:*) var 
 snowletter="*" // Set the speed of sinking (recommended values range 
 from 0.3 to 2) var sinkspeed=0.6 // Set the maximal-size of your snowflaxes var 
 snowmaxsize=22 // Set the minimal-size of your snowflaxes var snowminsize=8 // 
 Set the snowing-zone // Set 1 for all-over-snowing, set 2 for left-side-snowing 
 // Set 3 for center-snowing, set 4 for right-side-snowing var  snowingzone=3  ///////////////////////////////////////////////////////////////////////////  
 // CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// 
 // Do not edit below this line 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.clientHeight 
 marginright = document.body.clientWidth } else if (ns6) { marginbottom = window.innerHeight 
 marginright = window.innerWidth } 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 
 snow[i].style.color=snowcolor[randommaker(snowcolor.length)] 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 
 snow[i].style.top=snow[i].posy } 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]); 
 snow[i].style.top=snow[i].posy 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>


2 - Hiệu ứng 2

- Hiệu ứng tuyết rơi sử dụng ảnh
- Tải hình ảnh tuyết rơi ở đây ( có nhiều kiểu để chọn )
http://www.mediafire.com/?g79le58ol8o5rer

<script>
 var SNOW_Picture = "/billeder/snow.gif";
var SNOW_no = 15;

var SNOW_browser_IE_NS = (document.body.clientHeight) ? 1 : 0;
var SNOW_browser_MOZ = (self.innerWidth) ? 1 : 0;
var SNOW_browser_IE7 = (document.documentElement.clientHeight) ? 1 : 0;

var SNOW_Time;
var SNOW_dx, SNOW_xp, SNOW_yp;
var SNOW_am, SNOW_stx, SNOW_sty; 
var i, SNOW_Browser_Width, SNOW_Browser_Height;

if (SNOW_browser_IE_NS)
{
 SNOW_Browser_Width = document.body.clientWidth;
 SNOW_Browser_Height = document.body.clientHeight;
}
else if (SNOW_browser_MOZ)
{
 SNOW_Browser_Width = self.innerWidth - 20;
 SNOW_Browser_Height = self.innerHeight;
}
else if (SNOW_browser_IE7)
{
 SNOW_Browser_Width = document.documentElement.clientWidth;
 SNOW_Browser_Height = document.documentElement.clientHeight;
}


SNOW_dx = new Array();
SNOW_xp = new Array();
SNOW_yp = new Array();
SNOW_am = new Array();
SNOW_stx = new Array();
SNOW_sty = new Array();

for (i = 0; i < SNOW_no; ++ i) 
{ 
 SNOW_dx[i] = 0; 
 SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-50);
 SNOW_yp[i] = Math.random()*SNOW_Browser_Height;
 SNOW_am[i] = Math.random()*20; 
 SNOW_stx[i] = 0.02 + Math.random()/10;
 SNOW_sty[i] = 0.7 + Math.random();
 if (i == 0) document.write("<\div id=\"SNOW_flake"+ i +"\" style=\"position: absolute; z-index: "+ i +"; visibility: visible; top: 15px; left: 15px;\"><a href=\"http://www.peters1.dk\" target=\"_blank\"><\img src=\""+SNOW_Picture+"\" border=\"0\"></a><\/div>");
 else document.write("<\div id=\"SNOW_flake"+ i +"\" style=\"position: absolute; z-index: "+ i +"; visibility: visible; top: 15px; left: 15px;\"><\img src=\""+SNOW_Picture+"\" border=\"0\"><\/div>");
}

function SNOW_Weather() 
{ 

for (i = 0; i < SNOW_no; ++ i) 
{ 
 SNOW_yp[i] += SNOW_sty[i];

 if (SNOW_yp[i] > SNOW_Browser_Height-50) 
 {
 SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);
 SNOW_yp[i] = 0;
 SNOW_stx[i] = 0.02 + Math.random()/10;
 SNOW_sty[i] = 0.7 + Math.random();
 }

 SNOW_dx[i] += SNOW_stx[i];

 document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";
 document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i] + SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";
}

SNOW_Time = setTimeout("SNOW_Weather()", 10);

}

SNOW_Weather(); 
 </script>


3 - Hiệu ứng 3
- Hiệu ứng tuyết bay theo chiều gió (bay theo con trỏ chuột)

<script type="text/javascript" name="snow.js">
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 60;   //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style && 
typeof d.documentElement.style.MozOpacity == "string")
num = 12;

for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');

currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}


if (domWw) r = window;
else{ 
 if (d.documentElement && 
 typeof d.documentElement.clientWidth == "number" && 
 d.documentElement.clientWidth != 0)
 r = d.documentElement;
 else{ 
 if (d.body && 
 typeof d.body.clientWidth == "number")
 r = d.body;
 }
}


function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
 if (d.documentElement && d.defaultView && 
 typeof d.defaultView.scrollMaxY == "number"){
 oh = d.documentElement.offsetHeight;
 sy = d.defaultView.scrollMaxY;
 ow = d.documentElement.offsetWidth;
 sx = d.defaultView.scrollMaxX;
 rh = oh-sy;
 rw = ow-sx;
 }
 else{
 rh = r.innerHeight;
 rw = r.innerWidth;
 }
h = rh - 2;  
w = rw - 2; 
}
else{
h = r.clientHeight - 2; 
w = r.clientWidth - 2; 
}
}


function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}


function snow(){
var dy,dx;

for (i = 0; i < num; i++){
 dy = fall[i];
 dx = fall[i] * Math.cos(currStep[i]);

 y[i]+=dy;
 x[i]+=dx; 

 if (x[i] >= w || y[i] >= h){
 y[i] = -10;
 x[i] = Math.round(Math.random() * w);
 fall[i] = (sfs[i] == 1)?
 Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
 step[i] = (sfs[i] == 1)?
 0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
 }
 
 theFlakes[i].top = y[i] + scrl(0) + pix;
 theFlakes[i].left = x[i] + scrl(1) + pix;

 currStep[i]+=step[i];
}
setTimeout(snow,timer);
}


function init(){
winsize();
for (i = 0; i < num; i++){
 theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
 y[i] = Math.round(Math.random()*h);
 x[i] = Math.round(Math.random()*w);
}
snow();
}


if (window.addEventListener){
 window.addEventListener("resize",winsize,false);
 window.addEventListener("load",init,false);
}  
else if (window.attachEvent){
 window.attachEvent("onresize",winsize);
 window.attachEvent("onload",init);
} 

})();
}//End.
</script>

(Sưu tầm)
 

Web Design Technology blogs [ itdl ] Auto Backlink

HomeBlog ArchiveServicesLink2MeContactSubmit your PostPost RSS

Copyright © 2012 [ itdl ] Just for Share. Designed by Ngoc Luong - Freelancer

Best view in Chrome 11+, Firefox 5+ with resolution 1024 x 768 pixel. Powered by Blogger.