Tất cả bài viết | Lập trình HTML5

Hướng dẫn tạo hiệu ứng tuyết rơi bằng HTML5 Canvas

Phần định nghĩa nội dung HTML cho trang web

 
  
  
 	 
  	 
    
    Tạo hiệu ứng tuyết rơi bằng HTML5 Canvas

Phần định nghĩa CSS cho trang web

body {      
background: #090b44; 
/* Old browsers */      
background: -moz-radial-gradient(center, ellipse cover, #090b44 0%, #00001c 100%); 
/* FF3.6+ */      
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#090b44), color-stop(100%,#00001c)); 
/* Chrome,Safari4+ */      
background: -webkit-radial-gradient(center, ellipse cover, #090b44 0%,#00001c 100%); 
/* Chrome10+,Safari5.1+ */      
background: -o-radial-gradient(center, ellipse cover, #090b44 0%,#00001c 100%); 
/* Opera 12+ */      
background: -ms-radial-gradient(center, ellipse cover, #090b44 0%,#00001c 100%); 
/* IE10+ */      
background: radial-gradient(ellipse at center, #090b44 0%,#00001c 100%); 
/* W3C */      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#090b44', endColorstr='#00001c',GradientType=1 ); 
/* IE6-9 fallback on horizontal gradient */      
padding: 0;      
text-align: center;      
font-family:Arial;      
position: relative;      
margin: 0;      
height: 100%;      
padding-bottom: 50px;    
}        

.wrapper {    	
height: auto !important;    	
height: 100%;    	
margin: 0 auto;     	
overflow: hidden;    
}      

h1 {      
margin-top: 100px;      
color:#FFFFFF;      
text-shadow: 0 1px 5px rgba(0,0,0,0.5);      
margin-bottom: 5px;      
font-size: 70px;      
letter-spacing: -4px;    
}        

.main {      
float: left;      
width: 100%;      
margin: 0 auto;    
}    

.header {      
position: relative;    
}	

	a {      
text-decoration: none;	  
color:#1DF803;    
}        

.main h1 {      
padding:20px 50px;      
float: left;      
width: 100%;      
font-size: 40px;      
box-sizing: border-box;      
-webkit-box-sizing: border-box;      
-moz-box-sizing: border-box;      
font-weight: 100;      
margin: 0;      
padding-top: 25px;      
font-family:Arial;      
letter-spacing: 2px;    

}                 
canvas {      
display: block;      
width: 100%;      
height: 100%;      
top: 0;      
left: 0;      
position: fixed;    
}       
canvas.flare 
{      
opacity: 0.5;    
}
    

.snowWindPower {        
padding: 10px;        
width: 90px;        
border: none;        
border-radius: 3px;        
font-size: 33px;        
background: rgba(0, 0, 0, 0.31);        
color: white;    
}

Phần định nghĩa JQUERY

$(document).ready( function() {	     
$("canvas.flare").let_it_snow({  	      
windPower: 0,  	      
speed: 0,  	      
color: "#392F52",  	      
size:120,  	      
opacity: 0.00000001,  	      
count: 40,  	      
interaction: false  	    
});

$("canvas.snow").let_it_snow({    	      
windPower: 4,    	      
speed: 1,    	      
count: 250,    	      
size: 0    	    
});

$(".snowWindPower").on("change", function () {                
$("canvas.snow").trigger("letItSnow", ["windPower", parseInt($(this).val())]);            
});	  }
);

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất