奥迪:奥迪英杰汇

2018-02-11 H5案例分享 H5案例分享
奥迪:奥迪英杰汇


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

识别图中二维码

奥迪英杰汇-查阅二维码

完整欣赏此案例大约需要2分25秒


案例:奥迪英杰汇

出品:奥迪

亮点:

1、策划上, 长图类+视频类,这是奥迪为用户准备的新年特辑H5,诚邀杨澜、郎朗等9位品牌大使为大家送上新春祝福。H5以一镜到底滑屏形式将各个大使所代表的品牌形象串联起来,让用户感受到品牌的内涵与力量。

Loading完毕,进入长图,随着屏幕的滑动,各位大使的身影缓缓呈现在我们眼前,同时伴随的还有红色的剪影。

长图滑动到底部,进入一段视频,内容是9位大使对用户的新年祝福。

2、设计上, 整个长图以草纸纹理为背景,主体颜色为红色,画面简洁又不失特色;同时画面上各元素被设计为剪纸风格,剪纸是中国传统的民间艺术,进一步体现了品牌所表达给我们的文化观念;随着各个元素的出现,播放相应的声音,背景音舒缓,主次分明,整体营造了一种过年欢快的气氛。

3、交互上,横屏观看,慢慢向左滑动手机屏幕,随着滑动,展示叙事的推进,背景独白也随之变化。

4、体验上,小五体验过后,感觉这个H5的细节处理很好,背景音与特效音相配合,主次分明;H5中也使用了不少动画,使得页面更加鲜活。



技术实现: jQuery.js+video+ imagesLoader.js+iscroll.js+ howler.js



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

标签

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

相关推荐:

一汽-大众:为心中明天,造就改变。想象中的奥迪,已触手可及。

奥迪A3:奥迪A3

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~