浙江铃声推荐联盟

H5 两款炫的时间特效

编程根据地2018-12-05 13:53:42

正文共:1459 字 22 图  预计阅读时间: 4 分钟

最近在做自己的私站,想做个时间特效当搜索页面的背景,于是找了一些,在此分享两个。

------+-------

倒计时爆炸特效

------+-------


3D 倒计时爆炸特效

首先需要下载dat.gui.js

https://github.com/dataarts/dat.gui

dat.gui.js是一个一个轻量级的图形用户界面库,或者说GUI组件,只有几十KB,可以用于创建操作控制三维场景的菜单栏,比如渲染的时候通过鼠标调试光照参数, 要比手动更改参数再刷新浏览器要快捷方便得多。

使用方法:
dat.gui.js基本思路是先创建一个对象,也就是一个控件,对象包含一系列的属性,这些属性用来存储一系列的数据。控件的数据也就是属性值与你要更改的three.js中三维场景相关数据一一对应,只要控件中的属性值发生变化,three.js三维场景中相关对象的数据就会变化。那么控件对象的属性值如何更新,它会根据控件对象的属性值类型,来生成交互界面,同时通过键鼠与可视化界面的交互,可以实时动态改变控件中的数据。大家可以看到GUI界面与控件对象是相互影响的,控件对象的每一个属性会对应界面一个选项,控件对象属性的属性值影响界面选项的显示效果,界面选项可是可变控件对象属性的属性值。
三个常用属性:addFolder()、add()、addColor()


想详细学习dat.gui的自行Google一下
具体代码(代码太多,原谅我只粘贴了一些关键性的)
首先,正常的创建一个index.html文件、css文件夹和js文件夹

将dat js放入js文件夹内。然后创建一个index.js,index.js我打算写js代码,不放到html页面代码,看着爽一些。在css文件内加入一个style.css。
接着index.html引入相关js和css

页面代码写完了。。。休息一下
打开js文件夹下的index.js,开始撸function
window.requestAnimationFrame()是浏览器提供的js全局方法,针对动画效果。相当于渲染动画的框架,增大网页性能。

接着获取canvas对象并且设置宽高位置、颜色、字体等。

然后通过new Data获取当前时间设置为开始时间,设置时间间隔为0.2s。
设置一下自动变化大小的事件。

然后设置爆炸的颗粒和颗粒变化事件

最后设置轮回事件

代码搞定,css设置一下canvas的位置

运行index.html,瞅瞅效果图(如果想时间显示大小速度和爆炸颗粒,更改index.js就行)

代码已上传百度云,见文底

------+-------

跳舞的时间

------+-------




canvas做的跳舞的时间

准备工作:
创建css文件夹、js文件夹、index.js
下载jquery.js放到js中,并创建boom.js放到js文件夹
index.html引入两个js

boom.js中写了Google找的用canvas创建爆炸圆球的js

然后加入获取时间,并将获取的时间加入颜色、距离,并给时间数字添加了小球等属性

当时间秒变化的时候,加入彩色小球,达到爆炸的小效果

接着获取web窗口的大小,将获取的属性控制小球的边界,如果爆炸的彩色小球超过web边界,则将这个小球删除掉。

最后设置循环调用的事件,让不停的刷新页面。

搞定后查看效果。。。

想调节颜色和速度等设置相关属性,比如:
小球的颜色可以设置colors属性
设置小球活跃度设置属性u就可以

代码已经给大家整理好啦

扫描下方二维码,

回复关键词“h5时间特效”获取


点击阅读原文,加入我们~