cfs.snow.js

canvas 下雪场景 不会影响页面使用 使用方式非常简单

利用这个js文件,我们就能很快的让页面出现下雪的动画效果。

例如

<script type="text/javascript" src="/js/CFS.Snow.min.js"></script>

引入我们的JS文件

执行 snow.down()命令

支持移动端,对过期元素进行了处理

可定义的属性

	top : 0,
left : 0,
zIndex : 500,
number : 70
}``` 分别是 画布的顶点位置,画布的左对齐位置,画布的层级,雪花的数量 定义方式 如下 ``` snow.info.zIndex = 500; ``` 发布最初版 参考样例 : http://snow.coolfishstudio.com/

下载:http://snow.coolfishstudio.com/src/CFS.Snow.js

出处:https://github.com/coolfishstudio/cfs.snow.js

Canvas的下雪效果的更多相关文章

  1. 再次推荐一款逼真的HTML5下雪效果

    再次推荐一款逼真的下雪效果 效果图: 效果描述:之前推荐过一款下雪的jQuery插件之前的那款下降速度比较缓慢,今天推荐的这个下降速度比较快,大雪哇 使用方法:1.将index.html中的样式复制到 ...

  2. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

  3. canvas实现倒计时效果示例(vue组件内编写)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  4. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  5. canvas/CSS仪表盘效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. PS快速制作下雪效果

    PS快速制作下雪效果 具体的制作步骤如下: 1.打开PS,打开素材,打开窗口-动作 2.创建新动作,参数如下图 3.回到图层,建立一个图层,填充黑色,如下图 4.滤镜-像素化-点状化,参数如下图 5. ...

  7. [js高手之路]html5 canvas动画教程 - 下雪效果

    利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...

  8. 使用JavaScript和Canvas实现下雪动画效果

    该下雪动画效果使用了HTML5中Canvas画布实现,其中涉及了物理学中曲线运动的相关知识与运算. index.html <!DOCTYPE html> <html lang=&qu ...

  9. 用canvas实现简单的下雪效果

    首先新建一个html文件,将body的背景设置为天空的那种深蓝色,并创建一个canvas,canvas的操作逻辑都放在snow.js中: <!DOCTYPE html> <head& ...

随机推荐

  1. redis的配置详解

    redis 127.0.0.1:6379> CONFIG GET loglevel 1) "loglevel" 2) "notice" Redis 的配置 ...

  2. vue.js环境搭建

    安装 nodejs 地址 :https://nodejs.org/en/ npm安装最新版本 更新npm :npm update -g 安装淘宝镜像 npm install -g cnpm --reg ...

  3. JS消化理解

    JS执行的时候是必须在网页里面执行,和样式表差不多,也是内嵌的样式表,嵌在网页里面或外部的! 一 嵌在网页里面怎么嵌? 如果你想在网页里面嵌脚本,你需要在网页里面打出一块区域,这块区域来写脚本,在写样 ...

  4. Dubbo源码学习文章目录

    目录 Dubbo源码学习--服务是如何发布的 Dubbo源码学习--服务是如何引用的 Dubbo源码学习--注册中心分析 Dubbo源码学习--集群负载均衡算法的实现

  5. 使用C#读写ini配置文件

    INI就是扩展名为"INI"的文件,其实他本身是个文本文件,可以用记事本打工,主要存放的是用户所做的选择或系统的各种参数. INI文件其实并不是普通的文本文件.它有自己的结构.由若 ...

  6. 报表学习总结(一)——ASP.NET 水晶报表(Crystal Reports)的简单使用

    一.水晶报表简介 Crystal Reports(水晶报表)是一款商务智能(BI)软件,主要用于设计及产生报表.水晶报表是业内最专业.功能最强的报表系统,它除了强大的报表功能外.最大的优势是实现了与绝 ...

  7. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  8. headfirst设计模式(2)—观察者模式

    定义 观察者模式(有时又被称为发布(publish)-订阅(Subscribe)模式,在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知.这通常透过呼叫各观察 ...

  9. springMVC整合Junit4进行单元测试

    springMVC整合Junit4进行单元测试 标签: springMVC整合Junit4junit单元测试教程springMVC入门教程   spring(10)  版权声明:本文为博主原创文章,未 ...

  10. Frogs

    Problem Description There are m stones lying on a circle, and n frogs are jumping over them.The ston ...