雪佛兰:探界者探见千里江山
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分50秒
案例:探界者探见千里江山
品牌:雪佛兰
亮点:
1. 创意上
围绕王希孟的《千里江山图》,开启寻山探江,通过雪佛兰汽车的形式路径,展示了千里江山的美景。
《千里江山图》是北宋王希孟创作的绢本设色画,现收藏于北京故宫博物院。被寓为中国十大传世名画之一。
2. 策划上
① 首先,屏幕上飞过一只仙鹤,抓住用户的视觉重心,屏幕左上角处讲述,千年前,画家王希孟将美丽河山藏进了千里江山图。长按右下角的“探寻江山”按钮,开始探索。
② 探索的过程是一个1分04秒的mp4格式的视频,长按的过程中松开手指获取壁纸,会听到拍照的声音,点击“继续观景”,截图收起。可以继续长按右下角的“探寻江山”按钮。
③ 在视频的播放过程中,可以看到鄱阳湖的湖畔千山风景、苏州长桥的水榭长桥、庐山三叠泉瀑布的流溪飞泉、庐山汉阳峰的峰峦叠嶂,在这个过程中,一直有雪佛兰汽车不断的在画面中形式,有汽车外景,也有内景。
④ 视频播放完毕,出现刚刚你在浏览视频中,松开手指获取的壁纸。选择一张你的壁纸,点击下方的“绘制你的千里江山图”按钮,进入DIY海报页面。
⑤ 在DIY海报页面中,我们可以选择你的壁纸展示形状、背景图、印章,还可以修改印章文字和背景文本文字。虽然每个只有四种选项,但是那种古香古色的韵味足够了。点击屏幕左侧的“存”按钮,生成你的DIY海报。
⑥ 案例整体气势恢宏,细致的中国国画风格,通过仙鹤的飞行和雪佛兰汽车的形式,将整个案例贯穿。
3. 设计上
保持了《千里江山图》的古画原貌,页面间使用水墨切换,虽然仙鹤和汽车是原画中没有,但是融合的很好,比较自然的出现和过渡。
4. 技术上
长按后,展示的是mp4格式的视频,最后的DIY海报,使用的是原生的drawImage实现。
技术实现: vuejs + video + canvas
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号