jQuery canvas实现圣诞下雪效果

所属分类：其他-动画效果

38115 383 查看评论 (8)

分享到微信朋友圈

查看演示立即下载

插件描述：canvas实现圣诞下雪效果,这个下雪效果有点炫.

使用：

第一步：先在html页面引入相应的JS文件，并调用方法

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.let_it_snow.js"></script>
<script type="text/javascript">
$(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: 3,
   speed: 1,
   count: 250,
   size: 0
   });
//小碎片
   $("canvas.flake").let_it_snow({
   windPower: -3,
   speed: 1,
   count: 20,
   size: 10,
   image: "images/white-snowflake.png"
   });
});
</script>

第二步：html代码结构

<canvas width="100%" height="100%" class="flare"></canvas>
<canvas width="100%" height="100%" class="snow"></canvas>
<canvas width="100%" height="100%" class="flake"></canvas>
<div style="text-align:center;"></div>

完成！

炫酷的html5注册登录

jQuery随机显示表格选项卡插件Champagne.js