腾讯新闻：奥运众声志

2016-08-23 H5案例分享 H5案例分享

案例：奥运众声志

出品：腾讯新闻

亮点：

创意上，陀螺仪+图文展示+语音。最近用陀螺仪来展示的3D真实全景或虚拟全景的案例层出不穷，但是腾讯这次，只用了一张图，将其分成了很多版块，转动手机便能查看。并且每个模块的核心并不是图文展示，而是录好的语音，它并不会像平时的新闻那样有大段的文字，不会占用什么空间。
策划上，载入完毕后，进入到一个用重力感应查看的平面环境中，用户通过旋转手机观看。大的平面图分成了好几块，分别讲述不同的内容。每一块儿都有图片和文字内容，还有一段显示时间长度的语音，内容是对各类人的采访。在中下方，可以选择某个话题，针对它录制自己的声音，提交并分享到外面给别人听。
设计上，大型手绘板报风。小编其实并不知道该怎么描述这个风格，但给我的感觉就是在看一个很大的手绘画，而它又有很多板块，展示新闻类的内容。整体画面色彩很丰富，刚开始的动画效果很炫酷。
体验上，很像把一个有很多版块的大画摊在桌子上，一块一块观看。背景音乐很带感很巴西，小编很喜欢。

技术实现： CreateJS + CSS3(Transform)

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

奥运众声志-查阅二维码

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签