当前位置：首页 > 网页特效 > 动画效果

html5 canvas逼真下雪场景动画特效

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

首先，要使用这个html5下雪场景动画特效插件，需要在html的头部引入jQuery和jQuery.flipping_gallery.js文件。

```html
<body>
  ..
  <canvas class="snow" width="100%" height="100%"></canvas>
  ..
</body>
```
##### JAVASCRIPT
通过下面的jQuery代码来调用插件：

```html
$("canvas.snow").let_it_snow({
    speed: 0,
    interaction: true,
    size: 2,
    count: 200,
    opacity: 0,
    color: "#ffffff",
    windPower: 0,
    image: false
});
```
通过上面的基本参数设置，该html5 canvas下雪场景插件将自动适应canvas的大小并开始生成下雪动画效果。你所要做的只是将canvas放置在你需要的地方。

##### 下面是一些可用的参数：

- speed：该参数用于控制雪花飘落的速度。数值越高速度越快。数值设置在0-5之间。默认值为0。
- interaction：该参数用于设置用户与雪花之间的交互。如果设置为true，那么鼠标和雪花之间将形成一种互斥作用，从而生成一种用户与雪花的交互动作。默认值为true。
- size：该参数用于设置雪花的平均大小。数值越高雪花越大。数值设置在0-10之间。默认值为2。
- count：该参数用于设置统一时间在屏幕中的雪花的数量。默认值为200。
- opacity：该参数用于设置雪花的平均透明度。设置为1，雪花完全不透明。数值设置在0.0到1.0之间。默认值为0。
- color：该参数用于设置雪花的颜色。可用的格式为6个字母的HEX颜色格式。默认值为"#FFFFFF"。
- windPower：该参数用于设置风吹的方向。如果你想风吹向右边，设置为正数。如果想风吹向其它方向，设置为负数。数值越大（正数）/数值越小（负数），风吹动的越厉害。默认值为0。
- image：你可以使用一张雪花图片来代替默认的圆形雪花。该参数是图片的URL，设置为false表示使用默认的圆形图像。默认值为false。

web299.com

html5 canvas逼真下雪场景动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果