爱奇艺商城:这H5看个球啊
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分30秒
案例:这H5看个球啊
品牌:爱奇艺商城
亮点:
1.创意定位
根据爱奇艺的用户人群喜欢爱电影、电视剧、综艺节目等视频,以娱乐为主,采用一镜到底的方式,展示爱奇艺播放过的内容。整个H5以找球为梗,贯穿整体。整体表达:1是介绍爱奇艺视频内容;2是介绍爱奇艺的饭饭星球小程序(明星粉丝管理的小程序)。
2.策划逻辑
点击本案例,首先是各种圆球球变换弹跳的加载页面,然后进入到首屏。首屏是一张圣旨,说明找球的故事梗概,点击屏幕下方的“领旨找球”进入画中画的页面,画中画采用的是水彩画风,第一幅画就是《延禧攻略》里的皇上和皇后,此后依次点击每一屏下方的“点击寻找”就会出现各大影视剧、综艺节目中的人物,直到最后一屏用紫薇的经典名句“皇上,你还记得大明湖畔的爱奇艺吗?”,点击屏幕下方的“点击查看真相”,就会出现爱奇艺饭饭星球的小程序码,可长按识别,也可点击“昭告饭圈”分享H5至朋友圈。
3.设计上
祥云、圣旨、宣纸的颜色都流露出满满的中国风,各大IP热剧、综艺人物大集结,看过的人都会立马联想起对应的节目和剧情,全篇用找球作为主线进行串联,最后揭晓找的球就是爱奇艺饭饭星球。
4.技术上
一镜到底采用Canvas标签,配合原生 drawImage方法,进行画面从大到小的绘制。因为画面都是画中画,采用Canvas可以准确的定位画面的位置,兼容不同尺寸的手机屏幕,比纯图片image,或者背景图background标签,定位省事。
5.体验上
一镜到底是H5用的很多很多的形式了,网易每年年终推出的《娱乐圈画传》都是采用的这个形式。这支H5的右下角,在播放5屏幕后,还有“开启倍速”模式,可以快速播放动画,达到最后一屏。
技术实现: jQuery
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号