腾讯新闻 + HANS汉声：唤醒春日武汉

2020-04-10 H5案例分享 H5案例分享

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

识别图中二维码

唤醒春日武汉-查阅二维码

完整欣赏此案例大约需要1分钟20秒

案例：唤醒春日武汉

品牌：腾讯新闻 + HANS汉声

技术实现： html2canvas + jQuery + Animate.js + scroller.js

亮点：

1、创意定位

腾讯新闻和HANS汉声共同为武汉做的H5，以“唤醒春日武汉”为主题，细细品味武汉的城市气息。

2、策划上

这支H5一共两屏：加载页（Loading页）+主KV页；

主KV页有很多细节可以慢慢品味：

① 进入主KV页，提示用户移动屏幕，找武汉的100个故事；

② 用户滑动屏幕的瞬间开始是未上色的画面，滑动的瞬间，页面变成彩色，用户可以不断上下左右滑动屏幕；

③ 遇到画面的边界，会提示这边到头了；

④ 滑动的过程中，屏幕的上方会有“你已唤醒”的进度，当用户把所有画面都浏览完毕后，会有“春天武汉，已被你全部唤醒”；

⑤ 在浏览的过程中可以不断点击画面，会不断发现武汉故事，每发现一个武汉故事，页面下面的已经找到武汉故事的数量提示会加1，一共有100个武汉故事；

⑥ 页面下方的文案可以通过“换一句”按钮进行更换。

3、设计上

武汉的画面绘制细节很多，武汉大学、汉口站等，插画师画的真棒~

4、体验上

真实很多细节的H5，例如“你已唤醒”的进度，画面开始时的线稿，滑入屏幕后的彩色，都有城市被唤醒的感觉。

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

标签