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

卡通式圣诞节雪花飘落jquery下雪插件

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

简介

在页面中引入jquery和jquery-snow.js文件，以及font-awesome字体图标文件。

```html
<link href="css/font-awesome.min.css" rel="stylesheet">                 
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ckLine.min.js"></script>
```
#####  HTML结构
不需要特别指定任何HTML结构，通过插件的target参数，你可以指定雪花是在页面的body还是其它指定元素中生成。

#####  初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该卡通式圣诞节雪花飘落jquery插件。

```html
var snowEffectInterval = jQuery.fn.snow({
  // min size of element (default: 20)
  minSize: 10,
   
  // max size of element (default: 50)
  maxSize: 50,
   
  // flake fall time multiplier (default: 20)
  fallTimeMultiplier: 20, 
   
  // flake fall time difference (default: 10000)
  fallTimeDifference: 10000, 
   
  // interval (miliseconds) between new element spawns (default: 500)
  spawnInterval: 500, 
   
  // jQuery element to apply snow effect on (should work on any block element) (default: body)
  target: jQuery("body"),
   
  //elements to use in generating snow effect
  elements  : [
   
    // Element #1
    { 
      // html element to be spawned for this element
      html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',
      // hex color for this element - works only for font based icons
      color: '#ffffff'
    },
     
    // Element #2
    { 
      // html element to be spawned for this element
      html: '<i class="fa fa-bell-o" aria-hidden="true"></i>',
      // hex color for this element - works only for font based icons
      color: '#ed9b40'
    },
     
    // Element #3
    { 
      // html element to be spawned for this element
      html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',
      // hex color for this element - works only for font based icons
      color: '#ffffff'
    },
     
    // Element #4
    {
      // html element to be spawned for this element
      html: '<i class="fa fa-music" aria-hidden="true"></i>',
      // hex color for this element - works only for font based icons
      color: '#cc2037'
    },
     
    // Element #5
    { 
      // html element to be spawned for this element
      html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',
      // hex color for this element - works only for font based icons
      color: '#ffffff'
    },
  ]
});
```
#####  配置参数
该卡通式圣诞节雪花飘落jquery下雪插件的可用配置参数如下：

- minSize：雪花元素的最小尺寸。默认值为：10。
- maxSize：雪花元素的最小尺寸。默认值为：20。
- fallTimeMultiplier：雪花降落时间的乘数因子。默认值为：20。
- fallTimeDifference：雪花降落时间的差异因子。默认值为：10000。
- spawnInterval：新元素产生的时间间隔。默认值为：500毫秒。
- target：指定产生雪花的目标元素。默认值为：body。
- elements：用于产生雪花效果的一组HTML元素。

web299.com

卡通式圣诞节雪花飘落jquery下雪插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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