奥迪：奥迪英杰汇

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案例分享”团队原创文章，转载请注明出处！

标签