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

2020-04-10 H5案例分享 H5案例分享
腾讯新闻 + HANS汉声:唤醒春日武汉


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

识别图中二维码

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

完整欣赏此案例大约需要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案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

腾讯新闻X局部气候:我的战争

央视视频 + 腾讯新闻:致敬凡人英雄

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~