滴滴出行：脑内映像馆
案例：脑内映像馆
出品：滴滴出行
亮点：
- 策划上，视频+序列帧动画。Loading完毕进入案例，会到达脑内映像馆的门口，画面会弹出门口两个守卫的聊天窗口，聊天内容为“脑袋里的秘密”做铺垫，点击关闭按钮或“管他呢”关闭并回到门口，再点击门帘，即可进入脑内映像馆。馆中有哥伦布、雍正等6个人的“脑袋”，滑动屏幕或点击两侧按钮可以切换查看，点击“脑袋”就可打开。点击弹出的播放按钮会开始播放视频，每个脑袋对应不同的主题视频，视频内容与人物相关，并且会过渡引出滴滴出行的科技。视频结束，结尾页可以切换查看滴滴各类智能功能简介，用户可以“去看别的大脑”，点击“我要去告密”弹出分享提示。
- 设计上，背景色调偏暗，让场景有了些许神秘感，人物元素偏木偶风。从头到尾，包括视频部分，动画效果都很细腻，尤其是打开“脑袋”时，给人感觉非常惊艳。视频从人物讲述到滴滴自身的过渡，虽然过渡很快但是并不显生硬，并且在给人视觉冲击的同时，能让人对滴滴科技留下深刻的印象。视频结束后会以一个炫酷的效果进入结尾页，结尾页画风与之前的又完全不同，充满科技感，冲击更强烈。
- 体验上，小五对这类画风真的有莫名的好感。除了画风，还很喜欢它的动画效果，很多处小细节都做得非常细腻，比如“拉开门帘”的动效，虽然只有短短的1秒，但是也没有糊弄过去。小五觉得，如果案例中展示的滴滴科技，能与用户自身的数据结合起来，传播效果可能会更好，现在虽然视频中体现了滴滴科技在身边的陪伴，但是还是不够清晰，给人的感觉还是有点远，因为普通用户可能并不会关心“滴滴每天处理数据超过4500tb”，但会关心自己的那几k的信息。
技术实现： Zepto + Hammer.JS + Video
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要4分钟
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
