爱奇艺商城:这H5看个球啊

2019-03-02 H5案例分享 H5案例分享
爱奇艺商城:这H5看个球啊


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

识别图中二维码

这H5看个球啊-查阅二维码

完整欣赏此案例大约需要2分30秒


案例:这H5看个球啊

品牌:爱奇艺商城

亮点:

1.创意定位

根据爱奇艺的用户人群喜欢爱电影、电视剧、综艺节目等视频,以娱乐为主,采用一镜到底的方式,展示爱奇艺播放过的内容。整个H5以找球为梗,贯穿整体。整体表达:1是介绍爱奇艺视频内容;2是介绍爱奇艺的饭饭星球小程序(明星粉丝管理的小程序)。

 

2.策划逻辑

点击本案例,首先是各种圆球球变换弹跳的加载页面,然后进入到首屏。首屏是一张圣旨,说明找球的故事梗概,点击屏幕下方的“领旨找球”进入画中画的页面,画中画采用的是水彩画风,第一幅画就是《延禧攻略》里的皇上和皇后,此后依次点击每一屏下方的“点击寻找”就会出现各大影视剧、综艺节目中的人物,直到最后一屏用紫薇的经典名句“皇上,你还记得大明湖畔的爱奇艺吗?”,点击屏幕下方的“点击查看真相”,就会出现爱奇艺饭饭星球的小程序码,可长按识别,也可点击“昭告饭圈”分享H5至朋友圈。

 

3.设计上

祥云、圣旨、宣纸的颜色都流露出满满的中国风,各大IP热剧、综艺人物大集结,看过的人都会立马联想起对应的节目和剧情,全篇用找球作为主线进行串联,最后揭晓找的球就是爱奇艺饭饭星球。

 

4.技术上

一镜到底采用Canvas标签,配合原生 drawImage方法,进行画面从大到小的绘制。因为画面都是画中画,采用Canvas可以准确的定位画面的位置,兼容不同尺寸的手机屏幕,比纯图片image,或者背景图background标签,定位省事。

 

5.体验上

一镜到底是H5用的很多很多的形式了,网易每年年终推出的《娱乐圈画传》都是采用的这个形式。这支H5的右下角,在播放5屏幕后,还有“开启倍速”模式,可以快速播放动画,达到最后一屏。



技术实现: jQuery



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

标签

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

相关推荐:

爱奇艺×必胜客:披萨DIY大挑战

网易:寻找1987与伟大一起诞生的你

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~