玩出新高度的十佳h5特效-威尼斯人2299

       从引爆朋友圈的h5小游戏《围住神经猫》，到颠覆传统广告的大众点评h5专题页《我们之间只有一个字》，从2014下半年起，各种h5游戏和专题页纷纷崭露头角。“h5”，这个由html5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。

        现在市面上有一大批h5页面模板制作工具，他们方便了很多非专业设计师设计制作h5页面。但是必须吐槽的是，很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界，看多了就索然无味了。
 

　　1.粒子特效
 

 

 

　　百度百科：为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器，脚本来控制其整体或单个的运动，模拟出现真实的效果。
 

　　如上作品，那些粒子流和小火花，就属于粒子特效，很有真实感。
 

　　2.svg路径动画
 

 

　　
        简而言之，就是让svg的描边像是有人绘制一样的动画效果。动画轻巧不失真，特别适合那些崇尚简约设计风格的网页。
 

　　3.序列帧动画
 

 

　　
 

　　百度百科：序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3d效果等等。
 

　　4.全线性动画
 

 

　　
 

　　全线性动画可以理解为动画连续，几乎不间断播放，像视频一样流畅细腻。
 

　　这支h5打破了传统幻灯片式的呈现方式，塑造出了一种宽广、素雅、幽静的整体感受，该作品也被很多人推崇为h5里的动画片。
 

　　5.cinemagraphic
 

 

　　
 

　　什么是cinemegraphic？如果你不知道，就有点out了。顾名思义，cinema是电影摄影，graph是图片，cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。
 

　　其中cinemagraphic的应用恰到好处地了诠释了“自然风”的概念，只见画面上，人物的头发和衣角飞舞着，仿佛吹拂着一阵阵自然风，在炎炎夏日，他们依旧感受着清爽，尽情玩耍。作为互动者的人们，当看到画面上被风拂过的cinemagraphic动态场景，他们也身临其境地感受到自然风所能带来的这种清爽感受。

 

　　6.全景
 

 

　　
 

　　虚拟全景美术馆的概念并不新鲜。其鼻祖应该是google的artproject，让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新，在于它其实是热门广告形式h5页面的伪装。“我们想要通过多重手段（比如馆内的彩蛋、12点闭馆无法访问等等）来创造一个虚拟的真实空间，而不是传统h5的单线程教育的逻辑。”socialab杜蕾斯组的负责人说，“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

 

　　7.3d
 

 

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

　　祝福灯笼可以360旋转呈现，而且具有夜空繁星中题字灯笼飞来飞去的3d炫目效果，彰显“最飞羊的新春祝愿”。其中意趣和精妙所在，恐非文字所能表述。
 

　　8.点击碎屏
 

 

　　
 

　　“点击屏幕”不新鲜，但是这种屏幕击碎的画面好像也特别讨人喜欢，大概有三轮左右的“击碎”动作，这是整个h5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性，点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。
 

　　9.长按逐字
 

 

　　韩寒再谈一加：1步1步看清韩寒移动网站
 

　　整个h5页面用打字机的形式呈现，随着用户按下按钮，纸片会逐渐显示出韩寒从1999年起，为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。
 

　　10.滑动触发
 

 

　　
 

　　长页h5，滑动触发动效，和呆板的幻灯片式样的h5拉开了距离。epub360虽然能实现带动效带触发的长页，但是目前暂时还不能实现这种滑动触发动画。