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. IOS开发,遇到的第一个bug

    经过几天的得瑟,今天终于开始实践IOS开发了.由于没有苹果的电脑,现在先用虚拟机凑合着. 第一个开发的东西就是苹果官方向导里的helloworld了.最后在运行的时候有一个异常,导致程序会闪退,错误信 ...

  2. ubuntu服务器远程连接xshell,putty,xftp的简单使用教程

    当你自己千辛万苦终于搞到一个服务器(ubuntu(linux)系统的)之后,却不知道怎么进行时,xshell,putty,xftp是个很不错的选择 xshell和xftp是win下访问ubuntu(l ...

  3. 前端基本知识(一):W3C标准&&冒泡事件,捕获事件,W3C DOM对象模型,对比分析

    W3C标准是万维网联盟, 其他的可以参考万维网版本的更新内容 一.W3C标准 二.W3C DOM事件 三.冒泡事件 四.捕获事件 一.W3C标准 其实网页是由三分部组成:1.结构(structure) ...

  4. iOS 测试三方 KIF 的那些事

    一: KIF 三方库的配置   今天的广州天气还不错,原本想试试UI测试的,前几天也了解到很多公司都在用 KIF 这这三方框架!!今天也就试着做做,可就跪在了这个安装上,我用cocopods 导入了 ...

  5. C++虚表(V-Table)解析

    C++中的虚函数的作用主要是实现了多态,本人通过代码验证的方式了解虚表的结构及在多种继承方式下通过虚表访问子类函数.验证结果如下: 1)无虚函数覆盖的一般继承:可以通过子类的虚表访问父类的函数 2)虚 ...

  6. Javascript面对对象. 第四篇

    原型模式创建对象也有自己的缺点,它省略看构造函数传参初始化这一过程,带来的缺点就是初始化的值都是一致的. 而原型最大的缺点就是它优点,那就是共享. 原型中所有属性是被很多实例共享的,共享对于函数非常合 ...

  7. Unity 碰撞器和触发器的理解

    要产生碰撞必须为游戏对象添加刚体(Rigidbody)和碰撞器,刚体可以让物体在物理影响下运动.碰撞体是物理组件的一类,它要与刚体一起添加到游戏对象上才能触发碰撞.如果两个刚体相互撞在一起,除非两个对 ...

  8. 如何在shell脚本中导出数组供子进程使用

    功能说明:设置或显示环境变量. 语 法:export [-fnp][变量名称]=[变量设置值] 补充说明:在shell中执行程序时,shell会提供一组环境变量.export可新增,修改或删除环境变量 ...

  9. [编织消息框架][设计协议]bit基础

    理论部分 1字节等于8比特,也就是8个二进数,如下面公式 1Byte = 8bits = 0111 1111 1Short = 2Btye 1Int = 4Byte 那学这些有什么用呢? 可以用来做数 ...

  10. 关于input只能输入数字的两种小方法

    第一种: 直接给input标签 name赋值如下 <input name="start_price" id="start_price" type=&quo ...