个人简历DEMO
https://senschen.github.io/SensWorld/
这是一个还没有构思完全就开始编码的作品,所以可以看到代码结构比较乱。
- 比如一开始不打算使用jquery,但后来用上了我的一个依赖jquery的插件(图片破碎效果),于是还是开始用jquery;
- 比如一开始想兼容IE10和部分低版本chrome内核的国产浏览器,但要做兼容的地方太多又无暇做得那么完美;
- 比如很多想法都是临时想出来再加到代码里,比如每一步管理起来太乱,后面就又突然莫名其妙的用上了promise,而前面又用setTimeout的方式拼凑起来。
总之,是一个金玉其外败絮其中的作品吧- - 几乎包含了我会的所有ui方向的技术了。值得说明的是,按钮的按下特效、带尾巴的流星的绘制、音乐数据化的代码参考了其他优秀作品,自己加以重构利用,并非纯原创。谢侵删。
功能列表(按出现顺序)
1.keyframe实现的打字效果 2.判断是否加载完音乐,给出不同的提示 3.css制作的按钮ui/出现动画/点击动画 4.背景渐变色+背景位移动画实现的霓虹灯效果的文字 5.点击按钮强制全屏,并写入cookie,一天内不出现打字效果 6.canvas绘制的星空+旋转的流星 7.滚轮事件控制星空中移动的速度以及流星旋转速度 8.不断判断当前位移的距离,达到一定距离时出现地球 9.地球随瞬时音量的变化而缩放(这里音量的大小不是很准确,是取的所有声道的音量之和) 10.点击地球抖动动画 11.点击地球之后回到起点,执行破碎效果 12.黑屏,关闭鼠标指针,减慢音乐 13.定时改变页面html,实现代码的打字效果,同理实现css代码实时生效效果 14.定时器+公共动画实现简历一行一行飞入效果 15.***待实现的简历左右两个模块的视差滚动效果
2017-6-22 10:33:09
已经用vue重做了这个简历,感兴趣可在我的仓库里翻一下,代码重构之后顿时感觉世界清爽多了= =