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. 【JAVA笔记】JAVA后端实现统一扫码支付:微信篇

    最近做完了一个项目,正好没事做,产品经理就给我安排了一个任务.   做一个像收钱吧这样可以统一扫码收钱的功能.   一开始并不知道是怎么实现的,咨询了好几个朋友,才知道大概的业务流程:先是开一个网页用 ...

  2. Git学习之路(1)-Git简介

    ▓▓▓▓▓▓ 大致介绍 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds ...

  3. 怎么写cookie

    html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. c#.net的网站出现“正在中止线程””异常的原因和解决方法

    出现“正在中止线程”异常通常都是由于以下三种原因导致引起,给出解决方案如下: 解决方案: 1.针对Response.End,调用 HttpContext.Current.ApplicationInst ...

  5. JAVA中的char类型

    1.JAVA中,char占2字节,16位.可在存放汉字 2.char赋值 char a='a';  //任意单个字符,加单引号. char a='中';//任意单个中文字,加单引号. char a=1 ...

  6. IO的构造方法

    package com.file; /* File的构造方法: File(String pathname); File(File parent,String child); File(String p ...

  7. java的位运算符

    1.与运算&,同为1为1,否则为0: 例如:10001(二进制)&10000(二进制)=10000(二进制) 2.或运算|,只要有1就是1: 例如:10001(二进制)&100 ...

  8. java多线程四种实现模板

    假设一个项目拥有三块独立代码块,需要执行,什么时候用多线程? 这些代码块某些时候需要同时运行,彼此独立,那么需要用到多线程操作更快... 这里把模板放在这里,需要用的时候寻找合适的来选用. 总体分为两 ...

  9. API内部文件读取

    直接上代码吧 尝试将项目复制后建一个新的项目,结果总是有问题,不过可以把原项目转换为新项目,方法如下: 1.项目右键在android tools 有个 rename application packa ...

  10. Glusterfs下读写请求的处理流程

    Glusterfs基于内核的fuse模块,fuse模块除了创建fuse文件系统外,还提供了一个字符设备(/dev/fuse),通过这个字符设备,Glusterfs可以读取请求,并发送响应,并且可以发送 ...