京东：京东11.11全球好物节

2017-10-31 H5案例分享 H5案例分享

案例：京东11.11全球好物节

出品：京东

亮点：

策划上，视频+视觉差类，① 挑好物上京东，先以视频形式展现了用户的烦恼——哪里有好物，这时京东来了，并出现乘坐无人机的京东logo小狗，点明宣传主旨：挑好物，上京东；② 而后向右滑动，随着乘坐无人机的京东logo小狗，浏览全球好物，有手表、椅子、红酒、面料、香水；③ 最后引出京东全球好物节，点击尾屏左下角按钮可进入会场，点击右下角按钮可分享给他人。
设计上，① 视频部分和尾屏部分采用红色作为主色调，与京东品牌的主色调相契合；② 中间展示全球好物部分采用香槟色作为主色调，黑色作为背景色，画面看起来有一种空间立体感，里面的物体元素和文案文字随着京东logo小狗飞到的位置呈现出视觉差效果，给人以视觉上的享受。
技术上，① 视频部分是以带有preload，x-webkit-airplay，playsinline，webkit-playsinline，x5-video-player-type，x5-video-player-fullscreen等属性的html5的Video视频来实现的；② 滑动屏幕采用的是jQuery滑块插件ScrollerJS；③ 视觉差效果和动画主要是采用TweenMax + PixiJS来实现的。

技术实现： Zepto + TweenMax + PixiJS

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

识别图中二维码

京东11.11全球好物节-查阅二维码

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

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

标签