php实现下雪场景,html5 canvas逼真下雪场景动画特效
这是一款效果十分逼真的html5 canvas下雪场景动画特效插件。这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的。在Snowfall jquery plugin插件的基础上,这款html5下雪动画插件插件提供了更多用于控制雪花动画的参数和方法。
注意:该幻灯片插件已经在Chrome, Firefox, Safari的桌面和移动设备浏览器测试通过,IE浏览器上还未做过测试。
HTML结构
首先,要使用这个html5下雪场景动画特效插件,需要在html的头部引入jQuery和jQuery.flipping_gallery.js文件。
..
..
JAVASCRIPT
通过下面的jQuery代码来调用插件:
$("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。
php实现下雪场景,html5 canvas逼真下雪场景动画特效相关推荐
- html 产生烟雾效果,html5 canvas抽象模糊烟雾动画特效
特效描述:html5 canvas 抽象模糊 烟雾动画特效.html5 canvas绘制彩色模糊的烟雾动画.抽象模糊的烟雾动画特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 vo ...
- html画布敲碎的视频,html5 canvas碎纸屑空中飘落动画特效
特效描述:html5 canvas碎纸屑 空中飘落动画特效.canvas绘制空中飘落的纸屑动画特效. 代码结构 1. HTML代码 "use strict"; var _creat ...
- html波浪动态效果,HTML5+CSS3逼真水波浪动画特效
HTML5+CSS3逼真水波浪动画特效 @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 5 ...
- html 页面下雪效果,HTML5超逼真下雪场景效果
简要教程 这是一款基于jquery的超逼真下雪场景特效.该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效. 使用方法 在页面中引入ThreeCanva ...
- html5 雨滴效果,html5 canvas下雨滴掉落动画特效
特效描述:html5 canvas 雨滴掉落动画 动画特效.html5 canvas绘制下雨场景动画.雨滴动画. 代码结构 1. 引入JS 2. HTML代码 // TO DO // Remove r ...
- html语音播放动画,html5 canvas+js音频可视化动画特效
html5 canvas+js实现的音频可视化动画特效,选择一首本地音频文件播放查看效果. 查看演示 下载资源: 13 次 下载资源 下载积分: 20 积分 js代码 window.onload = ...
- 基于 HTML5 Canvas 实现的文字动画特效
前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的.文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读. ...
- android 五彩纸屑动画,HTML5 Canvas五彩纸屑粒子动画特效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 const getRandom = (min, max) => { return Math.rando ...
- html5 canvas实现雷达扫描动画特效
先看一下最终效果 实现思路 绘制4个圆 绘制一个十字线 绘制一个扫描的指针 让指针转起来 雷达构造函数 function Radar(){this.renderArr=[];//待渲染对象存储数组th ...
最新文章
- 2018-2019-1 20165201 《信息安全系统设计基础》第6周学习总结
- oracle视图用法,Oracle视图用法示例
- LeetCode 5382. HTML 实体解析器
- 编程语言:8086汇编中int 16h接收alt+方向键
- 设计原则-依赖倒置原则
- opencv项目实践二(银行卡卡号识别)
- HDLC 和PPP 的应用
- 《东周列国志》第八十五回 乐羊子怒啜中山羹 西门豹乔送河伯妇
- 流程图绘制工具 yEd
- 安装CUDA时报错packages have unmet dependencies的一个可能原因
- (翻译)网站品质与配色相关
- 小米WIFI恢复出厂设置方法
- 短视频剪辑操作一览图
- 《The One 团队》:第九次团队作业:BETA冲刺与团队项目验收
- SOD领域RGBD算法-训练集设置
- 洛谷P1496 火烧赤壁
- 使用python制作MODBUS RTU主站调试工具(一)—— GUI编程
- pyqt按钮带参数点击事件
- [网上资料整理]关于标准电阻阻值的说明(E6、E12、E24、E48、E96、E192)
- baidu网址提交|baidu收录网址提交|向百度提交网站
热门文章
- truncate table oec_meoney
- linux ethtool 命令详解
- 【VMware vSAN 7.0】超融合基础架构 (HCI)虚拟化集群解决方案
- [转]Flash与Flex3结合学习心得体会_Rich.Lee的网路历程_百度空间(转载)
- 区块链跨链是如何进行验证的?
- OpenAI发布新算法MuseNet,让甲壳虫乐队与LadyGaga一起演奏
- Axure9的Default元件库(第三讲)
- 预装win8重装激活失败
- 强大的 Markdown 编辑器
- 中国石油大学(华东)数据分析(Python)