我愿#给你我的水#：方太 X 京东公益 X 中国妇女发展基金会

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

案例：方太 X 京东公益 X 中国妇女发展基金会

出品：我愿#给你我的水#

亮点：

策划上，视频类，在首页上滑动手指来打碟，开启视频，三滴小水滴滴落在唱碟上，先开始自我介绍，我们是方太方水槽洗碗机，而后嗨起来；② 先假设这个世界没有水，世界上很多事情是不是会改变很多呢？而“我”愿意给你我的水，不让世界缺少水；③ 而后引出世界水日，节约用水，而后自然而然的过渡到方太水槽洗碗机的宣传，方太水槽洗碗机，更省水的洗碗机，点击我也要唱，输入带有带有三点水或两点水的姓名或加上地名，热力开唱。
设计上，漫画风格，采用蓝色作为主色调，白色作为背景色，里面方太水槽洗碗机的说唱还配有文案字幕哦，当字幕播放到带有三点水或其他水偏旁的汉字时，带有水的偏旁就会化成水滴落下来，很有趣哦。
技术上，① 这支H5主要是采用Html5的Video来实现的，并且给Video标签设有playsinline，webkit-playsinline，x5-video-player-type，x-video-player-fullscreen，x-webkit-airplay等属性，使其能全屏播放，在微信下体检也更好；② 视频播放完的动画主要采用的是Canvas；尾屏移动手机，形成视觉差动画效果采用的是Html5的重力感应。

技术实现： Zepto + CreateJS

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

识别图中二维码

方太 X 京东公益 X 中国妇女发展基金会-查阅二维码

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

标签