苏宁易购：不落单的双11

2017-11-03 H5案例分享 H5案例分享

案例：不落单的双11

出品：苏宁易购

亮点：

策划上，视频类。这是由苏宁易购为宣传自己的品牌所打造的一款宣传h5。① 首屏，苏宁易购的logo小狮子嘟嘴卖萌，上面有“戳我”的对话框。② 视频播放阶段，以快速转换的文字进行向用户展示介绍。③ 尾屏，“不落单的双十一，就在苏宁易购”挂在屏幕的上方，下面有两个二维码和苏宁易购的logo小狮子。
设计上，炫酷插画风格。① 黄色与白色之间颜色的快速转换，文字与文字之间的快速闪动，造就了很炫酷的视觉感受。② 黄色的小狮子偶尔的卖个萌，添加了几分可爱的效果。
技术上，首屏的小狮子卖萌阶段采用了Canvas技术实现，全款h5的视频播放采用了Html5中的Video标签技术实现，其中Video标签实现全屏播放的主要属性为:x5-video-player-type o-player-fullscreen x5-vide x5-video-orientation webkit-playsinline playsinline="true"。

技术实现： Canvas + jQuery +Video

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

识别图中二维码

不落单的双11-查阅二维码

完整欣赏此案例大约需要48秒

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

标签