JavaScript tạo hiệu ứng tuyết rơi cho web

Chẳng có gì để giới thiệu nhiều . Đây là code javascript tạo hiệu ứng tuyết rơi cho trang web của bạn, đặc biệt là web giáng sinh

Code hiệu ứng tuyết trắng rơi

Demo: http://ngockhuong.com/wp-content/js/tuyetroi.html

Code:

var snowStorm = null;

function SnowStorm() (isIE && !isIE6 && !isOldIE)); // IE <7 doesn't do PNG nicely without crap filters
 var docFrag = document.createDocumentFragment();
 this.oControl = null; // toggle element
 if (flakeLeftOffset == null) flakeLeftOffset = 0;
 if (flakeRightOffset == null) flakeRightOffset = 0;

 function rnd(n,min) 
 if (isNaN(min)) min = 0;
 return (Math.random()*n)+min;
 

 this.randomizeWind = function() 
 vRndX = plusMinus(rnd(vMaxX,0.2));
 vRndY = rnd(vMaxY,0.2);
 if (this.flakes) 
 for (var i=0; i<this.flakes.length; i++) 
 if (this.flakes[i].active) this.flakes[i].setVelocities();
 
 
 

 function plusMinus(n) 
 return (parseInt(rnd(2))==1?n*-1:n);
 

 this.scrollHandler = function() 

 this.resizeHandler = function() 
 if (window.innerWidth 

 this.resizeHandlerAlt = function() 
 screenX = targetElement.offsetLeft+targetElement.offsetWidth-flakeRightOffset;
 screenY = flakeBottom?flakeBottom:targetElement.offsetTop+targetElement.offsetHeight;
 screenX2 = parseInt(screenX/2);
 

 this.freeze = function() 
 // pause animation
 if (!s.disabled) 
 s.disabled = 1;
 else 
 return false;
 
 for (var i=0; i<s.timers.length; i++) 
 clearInterval(s.timers[i]);
 
 

 this.resume = function() 
 if (s.disabled) 
 s.disabled = 0;
 else 
 return false;
 
 s.timerInit();
 

 this.toggleSnow = function() 
 if (!s.flakes.length) 
 // first run
 s.start();
 s.setControlActive(true);
 else 
 s.active = !s.active;
 if (s.active) 
 s.show();
 s.resume();
 s.setControlActive(true);
 else 
 s.stop();
 s.freeze();
 s.setControlActive(false);
 
 
 

 this.setControlActive = function(bActive) 
 // Y.D[(bActive?'addClass':'removeClass')](s.oControl,'active');
 

 this.stop = function() 
 this.freeze();
 for (var i=this.flakes.length; i--;) 
 this.flakes[i].o.style.display = 'none';
 
 removeEvent(window,'scroll',s.scrollHandler);
 removeEvent(window,'resize',s.resizeHandler);
 if (!isIE) 
 removeEvent(window,'blur',s.freeze);
 removeEvent(window,'focus',s.resume);
 
 // removeEventHandler(window,'resize',this.resizeHandler,false);
 

 this.show = function() 
 for (var i=this.flakes.length; i--;) 
 this.flakes[i].o.style.display = 'block';
 
 

 this.SnowFlake = function(parent,type,x,y) 

 this.snow = function() 
 var active = 0;
 var used = 0;
 var waiting = 0;
 for (var i=s.flakes.length; i--;) 
 if (s.flakes[i].active == 1) 
 s.flakes[i].move();
 active++;
 else if (s.flakes[i].active == 0) 
 used++;
 else 
 waiting++;
 
 
 if (snowCollect && !waiting) // !active && !waiting
 // create another batch of snow
 s.createSnow(flakesMaxActive,true);
 
 if (active<flakesMaxActive) 
 with (s.flakes[parseInt(rnd(s.flakes.length))]) 
 if (!snowCollect && active == 0) 
 recycle();
 else if (active == -1) 
 active = 1;
 
 
 
 

 this.mouseMove = function(e) 
 if (!followMouse) return true;
 var x = parseInt(e.clientX);
 if (x<screenX2) 
 windOffset = -windMultiplier+(x/screenX2*windMultiplier);
 else 
 x -= screenX2;
 windOffset = (x/screenX2)*windMultiplier;
 
 

 this.createSnow = function(limit,allowInactive) 
 for (var i=0; i<limit; i++) i>flakesMaxActive) s.flakes[s.flakes.length-1].active = -1;
 
 targetElement.appendChild(docFrag);
 

 this.timerInit = function() 
 s.timers = (!isWin9X?[setInterval(s.snow,20)]:[setInterval(s.snow,75),setInterval(s.snow,25)]);
 

 this.init = function() 
 for (var i=0; i<2048; i++) 
 s.terrain[i] = 0;
 
 s.randomizeWind();
 s.createSnow(snowCollect?flakesMaxActive:flakesMaxActive*2); // create initial batch
 addEvent(window,'resize',s.resizeHandler);
 addEvent(window,'scroll',s.scrollHandler);
 if (!isIE) 
 addEvent(window,'blur',s.freeze);
 addEvent(window,'focus',s.resume);
 
 s.resizeHandler();
 s.scrollHandler();
 if (followMouse) 
 addEvent(document,'mousemove',s.mouseMove);
 
 s.timerInit();
 

 var didInit = false;

 this.start = function(bFromOnLoad) 
	if (!didInit) 
	 didInit = true;
	 else if (bFromOnLoad) 
	 // already loaded and running
	 return true;
	
 if (typeof targetElement == 'string') 
 targetElement = document.getElementById(targetElement);
 if (!targetElement) throw new Error('Snowstorm: Unable to get targetElement');
 
	if (!targetElement) 
	 targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
	
 if (targetElement != document.documentElement && targetElement != document.body) s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
 s.resizeHandler(); // get bounding box elements
 if (screenX && screenY && !s.disabled) 
 s.init();
 s.active = true;
 
 

 if (document.addEventListener) 
	// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
	document.addEventListener('DOMContentLoaded',function()s.start(true),false);
 window.addEventListener('load',function()s.start(true),false);
 else 
 addEvent(window,'load',function()s.start(true));
 





snowStorm = new SnowStorm();

Các bạn tạo file snow.js bằng nopad rồi dán code trên vào nhá. Hoặc import file có sẵn từ trang mình về theo địa chỉ: http://ngockhuong.com/wp-content/js/snow.js

*Để đưa code hiệu ứng trên vào web, bạn dùng cú pháp lệnh sau:

<script type="text/javascript" src="http://Đường dẫn đến file hiệu ứng/snow.js"></script>

Hoặc bạn có thể dùng code sau dán trực tiếp vào web:

<script type="text/javascript" src="http://ngockhuong.com/wp-content/js/snow.js"></script>

 

---------------------------------------------
Post by: Chatwithme9x
Bài viết gốc tại: http://ngockhuong.com/uncategorized/javascript-tao-hieu-ung-tuyet-roi-cho-web.html