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