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

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

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

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 Tham gia làm hội viên của kênh này để được hưởng đặc quyền
Bạn có thể quan tâm

Vẽ đồ họa web với HTML5 Canvas (Phần 6) Học lập trình web

Vẽ đồ họa web với HTML5 Canvas (Phần 5) Học lập trình web

Vẽ đồ họa web với HTML5 Canvas (Phần 4) Học lập trình web

Vẽ đồ họa web với HTML5 Canvas (Phần 3) Học lập trình web

Vẽ đồ họa web với HTML5 Canvas (Phần 2) Học lập trình web

Vẽ đồ họa web với HTML5 Canvas (Phần 1) Học lập trình web

Cách chèn Video vào trang web bằng HTML5 Học lập trình web

Cách chèn âm thanh Audio vào trang web bằng HTML5 Học lập trình web

Tìm hiểu cấu trúc cơ bản của một trang web HTML4 và HTML5

Tìm kiếm phổ biến