雪佛兰:探界者探见千里江山

2019-05-18 H5案例分享 H5案例分享
雪佛兰:探界者探见千里江山


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

识别图中二维码

探界者探见千里江山-查阅二维码

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


案例:探界者探见千里江山

品牌:雪佛兰

亮点:

1. 创意上

围绕王希孟的《千里江山图》,开启寻山探江,通过雪佛兰汽车的形式路径,展示了千里江山的美景。

《千里江山图》是北宋王希孟创作的绢本设色画,现收藏于北京故宫博物院。被寓为中国十大传世名画之一。

 

2. 策划上

 ① 首先,屏幕上飞过一只仙鹤,抓住用户的视觉重心,屏幕左上角处讲述,千年前,画家王希孟将美丽河山藏进了千里江山图。长按右下角的“探寻江山”按钮,开始探索。

② 探索的过程是一个1分04秒的mp4格式的视频,长按的过程中松开手指获取壁纸,会听到拍照的声音,点击“继续观景”,截图收起。可以继续长按右下角的“探寻江山”按钮。

 

 

③ 在视频的播放过程中,可以看到鄱阳湖的湖畔千山风景、苏州长桥的水榭长桥、庐山三叠泉瀑布的流溪飞泉、庐山汉阳峰的峰峦叠嶂,在这个过程中,一直有雪佛兰汽车不断的在画面中形式,有汽车外景,也有内景。

④ 视频播放完毕,出现刚刚你在浏览视频中,松开手指获取的壁纸。选择一张你的壁纸,点击下方的“绘制你的千里江山图”按钮,进入DIY海报页面。

 

 

⑤ 在DIY海报页面中,我们可以选择你的壁纸展示形状、背景图、印章,还可以修改印章文字和背景文本文字。虽然每个只有四种选项,但是那种古香古色的韵味足够了。点击屏幕左侧的“存”按钮,生成你的DIY海报。

⑥ 案例整体气势恢宏,细致的中国国画风格,通过仙鹤的飞行和雪佛兰汽车的形式,将整个案例贯穿。

 

 

3. 设计上

保持了《千里江山图》的古画原貌,页面间使用水墨切换,虽然仙鹤和汽车是原画中没有,但是融合的很好,比较自然的出现和过渡。

 

4. 技术上

长按后,展示的是mp4格式的视频,最后的DIY海报,使用的是原生的drawImage实现。

 



技术实现: vuejs + video + canvas



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

标签

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

相关推荐:

拉勾×爱卡汽车:测测你的职场气质配开什么车

大众汽车:纯电时代,经典焕新

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~