jQuery canvas实现圣诞下雪效果

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

 38570  383  查看评论 (8)
分享到微信朋友圈
X
jQuery canvas实现圣诞下雪效果 ie兼容9

使用:

第一步:先在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>

完成!

相关插件-动画效果

文字插件特效_文字动画特效js插件

此插件是针对文字写的一个动画插件,主要可运用在开场和出场的时候,插件方便小巧,只需要配置参数即可达到数十种动画效果
  动画效果
 59132  856

点击效果Google Design 谷歌的设计团队

效果是 Google Design 也就是谷歌的设计团队博客用到了这个效果 , 当时的第一感觉就是 擦 ,google就是牛逼, 一个按钮点击也要酷到不要不要的了
  动画效果
 39185  500

css3实现鲨鱼游动(酷)

css3实现鲨鱼游动,效果非常酷哦。
  动画效果
 38794  414

炫酷css3登录界面

带CSS3动画特效的时尚登录界面UI设计
  动画效果
 91796  734

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    小屁孩儿 0
    2017/11/7 17:59:39

    就能插入一张图片啊

    回复
    Abdomeni丶 0
    2017/8/5 9:54:12
    熊晓晓 0
    2017/3/23 15:47:41

    能不能也发给我

    回复
    落叶&随风 0
    2017/3/15 18:45:26

    能不能把这个发给我呀,嘤嘤嘤...

        熊晓晓0
        2017/3/23 15:44:41

        我也想要

    回复
    change 0
    2017/2/24 22:04:26
    nanbei 0
    2017/1/24 13:36:48
    很漂亮啊
        一空0
        2017/3/10 9:50:30

        很喜欢

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复