阿里影业:六周岁生日快乐
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分45秒
案例:六周岁生日快乐
品牌:阿里影业
技术实现: video + jQuery + touchjs + html2canvas
亮点:
1、创意定位
阿里影业六周年庆,用阿里影业出品或投资过的电影经典镜头串联出的一支H5,是回顾,也是新征程的开启。
2、策划上
① 在加载页很清晰写着阿里影业六周年,我们可以猜到H5的内容会是关于阿里影业;进入首页后,提示横屏观看,点击“START TO VIEW”按钮,开始播放一段视频;
② 播放的视频(MP4格式)时长为1分09秒,一部部我们熟知的电影的经典画面,小五看出了15部电影(看看你能看出多少部);
③ 视频播放完毕后,是一个快速闪动的电影画面,提示向上滑动暂停;暂停后,出现刚才视频中的一个镜头,每个镜头对应一个电影,用户输入是哪部电影,屏幕右下角提示答题用时;点击“完成答题”,答错了,点击数字6形状的刷新大按钮,重新进入快速闪动的电影画面页,重新选择电影镜头,回答哪部电影;答对了,提示上传一张照片和输入昵称,点击“确认提交”按钮,生成对应电影海报。
3、设计上
美漫风格画面,将真实的电影镜头漫画化。
4、体验上
视频播放完毕的看图猜电影有意思,猜电影的同时,也记住了原来阿里影业出品或投资过这么多好电影,包括《绿皮书》等。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号