NO1-HTML5传播互动精选案例分享

一、《功夫熊猫3》电影官方手游网站

来源:game.163

  

创意特色:

通过五个场景,围绕功夫熊猫3的三个主角(阿宝、师傅、老虎)来展现《功夫熊猫3》电影官方手游里面的一些游戏场景,把具有强烈击打感的动画片段,以特殊镜头切换的方式串成故事线来展示熊猫3的游戏特色。

实现剖析:

使用了tweenmax.js和timeline.js替代css样式写动画的方式,把片头和官网资讯内容做在一个页面,性能优化是一个很大的挑战。其中官网资讯那块主要用了swiper来实现轮播和内部滚动。实现难点主要有保持整个片头动画的连贯性、节奏感,以及跳过和不刷新重播动画时保证动画细节的不丢失。

扫描二维码体验:


二、您有一个新年正在更新

来源:laiwang

  

创意特色:

整个专题的设计场景以看春节晚会为开头,结合画中画的形式来不断的层层嵌套,引出在电视机前人们过新年的种种场景。场景切换和普通的上下切换或者左右切换场景的方式相比,很有创意和特色,为主题引导提供了很好的方式。

实现剖析:

正如上面说的特色,场景切换的效果固然也是实现的重点,上一屏的场景是下一屏的一部分,可以通过两个手指缩小放大的动作来回切换场景。手指缩小放大的操作不知道是不是用到第三方的库类,因为代码都是压缩了,很难看出,有兴趣的童鞋自己研究。不过,发现里面的手指提示居然是两个img标签在不断的用js来控制show和hide,这样做不太好吧。。。

扫描二维码体验:


三、天天爱消除小王子电影主题版本

来源:qq

  

创意特色:

这个有点意思,用动画来讲述一个小故事,将爱消除的核心玩法,构建成这个星球的世界观,希望借小王子的视角,探索其中奥秘。结合爱消除,以“消除烦恼”作为关键切入点,连接小王子的纯净世界,感悟成长。

实现剖析:

整个动画很细腻,要达到这种效果,要么就逐祯,要么就画布,逐祯估计不是很现实,这里采用了后者canvas实现(非canvas逐祯哈)。里面的素材请求很奇怪,它是归类到图片请求,但是几百个请求都是这种只有63B大小的 

http://pinghot.qq.com/pingd?dm=peng.qq.com.hot&url=/act/a20150923yr/index.html&arg=-&hottag=a20150923yr.index.heartbeat&hotx=9999&hoty=9999&rand=89961

能力有限,暂时还没搞懂。。。


扫描二维码体验:


四、猴哥巧取包

来源:meizu

  

创意特色:

整个小游戏比较常见,但是按钮的文案还是有点创意,比如后面的点击分享,他设成了不要点,通过这种反意,引起用户点击的兴趣。

实现剖析:

实现难度不大,但是做这种击打效果的,击打动画和声音的连贯是个难点,要保证在连续点击也能流畅响应。像这个页面就借助了create.js的四大法宝(preloadjs、soundjs、tweenjs、easeljs)。

扫描二维码体验:


五、功夫宝来讲武堂

来源:一汽大众

  

创意特色:

看来功夫熊猫3真的很火,游戏、汽车公司都用它来推广。本专题的熊猫的在各屏出场时的动画给页面添加了不少呆萌,而第二屏汽车旋转和第三屏的点指定点出详细信息应该是参考类似极品飞车这些游戏做的吧。

实现剖析:

熊猫的在各屏出场时的动画是通过逐祯动画实现的,但是他实现的方式有点奇怪,是给每帧的动画定义一个class,然后通过js切换class name实现?为什么不直接用animation的step属性呢?和第二屏的汽车”3D旋转“,也是通过逐祯实现,只是不是自动播放,而是用户手动触发的。。好吧,也是一种思路,只是我一开始以为是3d模型~

扫描二维码体验:


更多HTML5传播互动案例请关注专栏:http://www.w3cmark.com/html5/


本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/2016/437.html)

分享到:

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
关注w3cmark
微信公众号 w3cmark_com