阿里影业:六周岁生日快乐

2020-07-06 H5案例分享 H5案例分享
阿里影业:六周岁生日快乐


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

识别图中二维码

六周岁生日快乐-查阅二维码

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


案例:六周岁生日快乐

品牌:阿里影业

技术实现: video + jQuery + touchjs + html2canvas

亮点:

1、创意定位

阿里影业六周年庆,用阿里影业出品或投资过的电影经典镜头串联出的一支H5,是回顾,也是新征程的开启。

 

2、策划上

① 在加载页很清晰写着阿里影业六周年,我们可以猜到H5的内容会是关于阿里影业;进入首页后,提示横屏观看,点击“START TO VIEW”按钮,开始播放一段视频;

② 播放的视频(MP4格式)时长为1分09秒,一部部我们熟知的电影的经典画面,小五看出了15部电影(看看你能看出多少部);

③ 视频播放完毕后,是一个快速闪动的电影画面,提示向上滑动暂停;暂停后,出现刚才视频中的一个镜头,每个镜头对应一个电影,用户输入是哪部电影,屏幕右下角提示答题用时;点击“完成答题”,答错了,点击数字6形状的刷新大按钮,重新进入快速闪动的电影画面页,重新选择电影镜头,回答哪部电影;答对了,提示上传一张照片和输入昵称,点击“确认提交”按钮,生成对应电影海报。

 

3、设计上

美漫风格画面,将真实的电影镜头漫画化。

 

4、体验上

视频播放完毕的看图猜电影有意思,猜电影的同时,也记住了原来阿里影业出品或投资过这么多好电影,包括《绿皮书》等。





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

标签

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

相关推荐:

腾讯影业:致每一个被光影打动过的你

阿里巴巴集团:程序员最爱说的假话

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~