JParticles 2.0 发布,打造炫酷的粒子特效
来源:互联网 发布:淘宝u站中心 编辑:程序博客网 时间:2024/06/05 11:47
JParticles 2.0 发布,打造炫酷的粒子特效。
不好意思哈,在这么繁花似锦的世界里,标题不得不取得吸引眼球一点哈,
不然...还是不啰嗦了,我们进入正题吧!
简单介绍一下
JParticles 2.0 版本之前还叫 Particleground.js,相信在用的朋友应该不会陌生,关于 1.x 版本的宣传文案可以移步看这里哈,或许可以帮助你了解 JParticles 2.0 的一些东西。
我们一贯的理念
我们(我/笑哭)一贯的理念是信仰:"The Write Less, Do More" 和 "Keep It Simple And Stupid"。
希望插件工具什么的使用起来非常的简单便捷,上手快,不耽误人们宝贵的时间,尤其是在变化迅速的前端,
希望我们的 代码写得简洁,简单,易懂,API设计的简洁,简单,易用, 最后 强大,易扩展!
此次版本更新日志
看看我们这次版本更新了哪些东西吧,biubiu...贴图:
貌似挺多的,主要我们还是只讲三点吧,剩下的可以看官网慢慢了解,哈哈。
第一点:视差粒子
几行 JavaScript 代码(也可以到在线编辑器 CodePen 在线编辑试试):
为了看起来更简洁,定义视差粒子层数的属性就省略了,因为本身它就是 `3` 层,也挺好的。
CodePen 演示四层,为了让大家能更了解属性的使用方法。
是不是好少...少到想哭有木有,但是很酷炫~
第二点:模拟语音搜索
学习于京东APP的搜索,上图:
我们的效果:
上 JavaScript 代码(也可以到在线编辑器 CodePen 在线编辑试试):
如果你使用过 1.x, 相信你对 wave 的参数配置很理解,
我们删除了之前的旧方法 setOffsetTop(),添加了新方法:setOptions(),
这个方法就更加强大与自由了,可以控制更多的属性的变化,达到我们想要的效果。
这里我们主要的控制就是这个方法了,只是按住这个自定义事件是用户自己的行为,
所以这里贴上自定义代码把我们简洁的 API,弄的好像很复杂了一样,冤枉~
其实一共就两处,见下面标注。
第三点:waveLoading 模拟进度条加载
这是一个封装好的,简单易用的模拟加载进度条动画。
1.x 版本是通过 wave 这个波浪运动来手写加载进度条的内容,并不是很方便,参数的控制也麻烦,
于是 2.0 着重封装了这个模拟加载进度条的动画,这个特效在单页应用首次加载什么的还是很需要的吧。
又高大上,又可以缓解加载的等待心情。
现在就来看看是怎么简单的使用这个功能特效吧,我们以加载 baidu.com 首页为示例,貌似其他的不允许 iframe 加载:
简单的 JavaScript 代码:
(也可以在线在 CodePen 编辑尝试,有对细节进行调整,而核心内容就是下面这么简单)
致歉
这个还是得致歉,之前承诺的会在新版增加QQ登录背景效果(Delaunay三角的实现),由于时间也挺赶的,
现在还没研究出Delaunay三角的实现,当然其实也可以用等研究好三角函数做出效果来了再发,
但是这样就耽误的新版的发布,还不如先把能用的发出来,先用着能用的,后续再慢慢添加其他有意思的东西进来。
此处,对看过更新日志并满怀期待的同志表示深深的歉意!
最后
官网(我想这应该是一个非常棒的文档,因为很用心在写):jparticles.js.org
不好意思哈,在这么繁花似锦的世界里,标题不得不取得吸引眼球一点哈,
不然...还是不啰嗦了,我们进入正题吧!
简单介绍一下
JParticles 2.0 版本之前还叫 Particleground.js,相信在用的朋友应该不会陌生,关于 1.x 版本的宣传文案可以移步看这里哈,或许可以帮助你了解 JParticles 2.0 的一些东西。
我们一贯的理念
我们(我/笑哭)一贯的理念是信仰:"The Write Less, Do More" 和 "Keep It Simple And Stupid"。
希望插件工具什么的使用起来非常的简单便捷,上手快,不耽误人们宝贵的时间,尤其是在变化迅速的前端,
希望我们的 代码写得简洁,简单,易懂,API设计的简洁,简单,易用, 最后 强大,易扩展!
此次版本更新日志
看看我们这次版本更新了哪些东西吧,biubiu...贴图:
貌似挺多的,主要我们还是只讲三点吧,剩下的可以看官网慢慢了解,哈哈。
第一点:视差粒子
几行 JavaScript 代码(也可以到在线编辑器 CodePen 在线编辑试试):
为了看起来更简洁,定义视差粒子层数的属性就省略了,因为本身它就是 `3` 层,也挺好的。
CodePen 演示四层,为了让大家能更了解属性的使用方法。
是不是好少...少到想哭有木有,但是很酷炫~
第二点:模拟语音搜索
学习于京东APP的搜索,上图:
我们的效果:
上 JavaScript 代码(也可以到在线编辑器 CodePen 在线编辑试试):
如果你使用过 1.x, 相信你对 wave 的参数配置很理解,
我们删除了之前的旧方法 setOffsetTop(),添加了新方法:setOptions(),
这个方法就更加强大与自由了,可以控制更多的属性的变化,达到我们想要的效果。
这里我们主要的控制就是这个方法了,只是按住这个自定义事件是用户自己的行为,
所以这里贴上自定义代码把我们简洁的 API,弄的好像很复杂了一样,冤枉~
其实一共就两处,见下面标注。
第三点:waveLoading 模拟进度条加载
这是一个封装好的,简单易用的模拟加载进度条动画。
1.x 版本是通过 wave 这个波浪运动来手写加载进度条的内容,并不是很方便,参数的控制也麻烦,
于是 2.0 着重封装了这个模拟加载进度条的动画,这个特效在单页应用首次加载什么的还是很需要的吧。
又高大上,又可以缓解加载的等待心情。
现在就来看看是怎么简单的使用这个功能特效吧,我们以加载 baidu.com 首页为示例,貌似其他的不允许 iframe 加载:
简单的 JavaScript 代码:
(也可以在线在 CodePen 编辑尝试,有对细节进行调整,而核心内容就是下面这么简单)
致歉
这个还是得致歉,之前承诺的会在新版增加QQ登录背景效果(Delaunay三角的实现),由于时间也挺赶的,
现在还没研究出Delaunay三角的实现,当然其实也可以用等研究好三角函数做出效果来了再发,
但是这样就耽误的新版的发布,还不如先把能用的发出来,先用着能用的,后续再慢慢添加其他有意思的东西进来。
此处,对看过更新日志并满怀期待的同志表示深深的歉意!
最后
官网(我想这应该是一个非常棒的文档,因为很用心在写):jparticles.js.org
如果你喜欢这个插件库并能帮助到你的实际工作中,希望它能发展的更好,提供更多有趣实用的特效,支持作者,烦请点个 Star O(∩_∩)O谢谢~。
转载地址:http://www.qdfuns.com/notes/15968/f9e0882210b12ec835394f7977b644e5.html
阅读全文
0 0
- JParticles 2.0 发布,打造炫酷的粒子特效
- [插件精选] 炫酷粒子特效
- Cocos2dx现成的粒子特效
- HTML5 canvas粒子系统打造逼真飘雪特效
- [技术] [插件精选] 炫酷粒子特效(下)
- 粒子特效
- 粒子特效
- 粒子特效
- 粒子特效
- 粒子特效
- 粒子特效
- H5炫酷特效系列4——炫酷粒子变化特效
- ui的粒子特效的层级问题
- 惊艳的HTML5粒子动画特效
- Java粒子特效喷薄的彩球
- unity新版粒子特效的组件获取
- unity序列帧动画的粒子特效
- 打造高大上的Canvas粒子动画
- 大数据量问题分析
- crontab设置计划任务
- gcc中利用-D参数进行宏定义
- Android中的Button按钮
- 过程与行为,资源与工具
- JParticles 2.0 发布,打造炫酷的粒子特效
- 执行ping操作的时候发生了什么?
- 鲁棒性
- BZOJ 3144 网络流最小割 解题报告
- 知识图谱初探
- C#中的接口实现多态
- 二叉搜索树的局限性
- 在做《第一行代码》ListViewTest实验时出现以下错误:
- 从高考到程序员