雷凌双擎电池：电池无忧拯救世界

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

案例：电池无忧拯救世界

出品：雷凌双擎电池

亮点：

策划上，故事类，以漫画故事形式叙述了2015年，全球爆发电能危机，用电紧张，垄断组织所代表的邪恶势力，收取高额电费，压榨平民，而正义一方“G组织”，则致力于位置电能平衡，研发电池侠与黑暗势力搏斗救出平民的故事，最后可去了解电池无忧计划，还可进行预约试驾，体验拥有无忧电池的新雷凌双擎车。
设计上，四格漫画风格，电池侠的英雄形象和电池无忧计划显示了雷凌电池的超强性能，画风粗旷，角色劲酷，画面动作狂野。
交互上，基本上采用的是上下滑动，点击的方式，但中间穿越大火采用的是摆动手机的交互形式。
技术上，上下滑屏切换采用的是JS滑屏组件Swiper，里面的动画主要是采用TweenMax + TweenLite来实现的，摆动手机穿越大火采用的是Html5的重力感应。

技术实现： Zepto + Swiper + TweenMax

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

识别图中二维码

电池无忧拯救世界-查阅二维码

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

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

标签