几个H5炫酷特效

那H5里有哪些高级动效了？小编仔细体验了国内很多几个优秀H5页面做品，整理出下面几个H5页面特效。咱们的H5做品若是能用上其中一两个，相信能增色很多！

 

一、粒子特效

 

—》》一键爆炸

 

 

模拟现实中的水、火、雾、气等效果由各类三维软件开发的制做模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器，脚原本控制其总体或单个的运动，模拟出现真实的效果。做者没有使用 canvas ，因此没法取到图片上每一个像素的颜色值。便使用了一些比较讨（sha）巧（bi）的方法。构造新图容器，隐藏原图—>生成一张张是碎裂小图—>boom 爆炸！

 

 

 

连接：http://web.jobbole.com/85543/

 

 

2.SVG路径动画

 

—》》水滴效果

普通的dom元素，制做圆滑曲线基本是不可能的，根据以往的积累，咱们是能够经过svg中的<path>来描绘贝塞尔曲线，达到实现圆滑曲线的效果。因此，采用svg来制做整个类水滴的索引组件是很好的解决办法。

 

 

连接：http://ued.baidu.com/?p=4959

三、序列帧动画

—》》大众点评：咱们之间只有一个字

做品解析：

逐帧动画相似与电影的播放模式，很适合于表演细腻的动画。例如：头发及衣服的飘动、走路等等。序列帧动画是只在时间轴的每帧上逐帧绘制不一样的内容，使其连续播放而成动画。

连接：http://www.epub360.com/search?q=一个字

 

4.Cinemagraphic

—》》Levi's: “换”醒你的夏天

Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。该应用恰到好处地了诠释了“天然风”的概念，做为互动者的人们，当看到画面上被风拂过的Cinemagraphic动态场景，他们也身临其境地感觉到天然风所能带来的这种清爽感觉。

连接：http://cool.levi.com.cn

5.全景

—》》杜蕾斯的第一座美术馆

杜蕾斯“美术馆”的创新，在于它实际上是热门广告形式H5页面的假装。“咱们想要经过多重手段（好比馆内的彩蛋、12 点闭馆没法访问等等）来创造一个虚拟的真实空间，而不是传统H5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说，“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

 

6.3D

—》》康师傅：2015最飞羊的新春祝愿

夜空繁星中题字灯笼飞来飞去的3D炫目效果，祝福灯笼还能够360旋转呈现，“最飞羊的新春祝愿”的主题表现的淋漓精致。

连接：http://old.vmlim20.com.cn/demo/2015cny/

7.点击碎屏

—》》大众点评：这个陌生来电你敢接吗？

“击屏幕”画面好像很讨人喜欢，大概有三轮左右的“击碎”动做，这是整个H5的互动高峰。另外手机来电也应用到了不少H5的功能上。

连接：http://evt.dianping.com/8809/index.html

8.长按逐字

—》》一加手机：1步1步看清韩寒

这个页面用打字机的形式呈现，触发逐字等动效很真实，用户按下按钮后，纸片会逐渐显示出韩寒从1999年起的成长轨迹。

连接：http://wx.oneplus.cn/mrx/