南方日报 + 腾讯:国宝为您祈福

2020-03-12 H5案例分享 H5案例分享
南方日报 + 腾讯:国宝为您祈福


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

识别图中二维码

国宝为您祈福-查阅二维码

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


案例:国宝为您祈福

品牌:南方日报 + 腾讯

技术实现: jQuery + swiper + html2canvas.js + animate.js

亮点:

1、创意定位

南方日报和腾讯人工智能实验室联合出品的H5,以国宝祝福用户。

 

2、策划上

整体策划分为两部分:

第①部分 故事情节交待,首先是一只穿着官服的小老鼠(名字叫阿福)敲击带福字的鼓,加载完毕屏幕下方出现“触屏开启”按钮,点击后进入;故事形式的视频(视频长度31秒),可以点击屏幕左上角“跳过”按钮,跳过此段视频的播放,视频故事开始是圣旨形式的横向长卷,打开后从左向右展开长卷,而后阿福向皇帝叙述粉丝回馈的事;

第②部分 网红直播的形式,五个阿福宝藏男形象,选择其中一个,不同的形象进入后国宝是不同的,卡通形象上方需要输入用户名,是你进入直播间的名字,点击“进入”按钮,你选择的卡通形象开始介绍国宝(每个卡通形象介绍的国宝数不同,有四个国宝也有五个国宝),网红直播是视频形式,可以横向滑动卡通人物,自动切换下一个卡通人物,国宝出现后,点击国宝,进入国宝的横向列表,再次点击后出现国宝的介绍,可以点击“谢主隆恩”,生成当前国宝的海报;点击“我再逛逛”,弹出的国宝介绍页面隐藏;生成国宝海报后可以长按保存,点击“再挑件尖货”,继续观看网红直播。

 

3、设计上

卡通老鼠阿福的形象,贯穿整支H5,与今年鼠年契合。

 

4、技术上

案例中使用视频(格式:mp4)比较多,例如开始的介绍,网红直播(每个卡通形象都对应一个视频),视频没有做预加载,但是由于视频都比较短,加载速度比较快,没有出现卡顿现象。

 





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

标签

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

相关推荐:

博物馆×中国文物报×腾讯看点:你的生肖之力

南方日报:出发咯!小编邀你穿越清远30年的时光之旅

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~