海尔：第1次让梦想变成家常

2017-02-09 H5案例分享 H5案例分享

案例：第1次让梦想变成家常

出品：海尔

亮点：

策划上，图文对比类，① 首页烟火璀璨，辞旧迎新，迎来第一次改变；② 而后以图文小动画的形式生动形象地演绎了第1次将一家的梦想变成家常的情景：由做菜手忙脚乱到在智能冰箱的帮做下做饭得心应手，由电话拜年到海尔智能电视可视通话，由半夜起来帮宝宝盖被子到用海尔智能空调自动调控，由看病排队到是用海尔智慧魔镜实时监测身体健康；③ 点击尾屏海尔智慧家庭贺岁大片看海尔智能家电改变生活日常视频，想购买其产品的小伙伴可点击尾页“预定智能家电”按钮。
设计上，手绘漫画风格，采用橘红色作为主色调，每个场景都是先以一幅左右对比的画面图文开始，而向右滑动，看以往情形，向左滑屏，看有了海尔智能家电后，给家带来改变的情景，点击改变后场景里的白色提示按钮，出来走心文案。
技术上，左右、上下滑屏采用的是JS滑屏组件Swiper，尾屏的海尔智慧家庭贺岁大片采用的是Video视频。

技术实现： jQuery + Swiper + Video

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

识别图中二维码

第1次让梦想变成家常-查阅二维码

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

标签