网易新闻 | 哒哒：逃不掉的四字魔咒
案例：逃不掉的四字魔咒
出品：网易新闻 | 哒哒
亮点：
- 策划上，一镜到底+横向滑动。进入案例，提示向左滑动屏幕展开动画。向左滑动时，动画正向播放，向右滑动则会倒放。案例讲述一个人回忆起从小到大，在家庭、学校、职场等各种地方，所遭遇的各种“四字魔咒”。老妈不让看电视，不让画画，“毕竟长辈，为了你好”；准备睡觉，室友却在玩游戏、弹吉他、大声打电话，但“同学一场，算了算了”；准备下班，领导却发消息让你做完表格再走，“初入职场，习惯就好”…这些四字魔咒从小到大，一直在陪伴着自己，每个年龄段对应不同的内容。随着“主角”头发慢慢变白、脱下，步入老年，画面也到达结尾页，露出“网易新闻×米果”和“说说而已-网络首档怼人短视频”。用户可以“点击观看”下载网易新闻客户端，也可以选择“再看一遍”。
- 设计上，背景色调大多时是深蓝，即场景大多时是夜晚（往往这个时候人们的情绪最复杂）。横向滑动配合视差效果，展示了一出与众不同的动画，网易真的把“长图滑动”这个交互形式，玩出了各种花样。背景音乐，选用了09年的法国电影《尽情游戏》的插曲《Larrons En Foire》，电影本身讽刺意味就很浓，所以这首BGM与案例主题和整体的感觉也都非常契合。
- 体验上，从老人的眼睛进入，营造了回忆的感觉，最后再从眼睛里出来，整体有头有尾，完整性很好。滑动时的缓冲效果，让案例很有线条感，给了用户很好的交互体验。动画使用js做了硬件加速，因此在体验时完全没有卡顿的感觉。回到内容，案例讲述的东西是大多数人都会经历（遭受）的，很能让人产生共鸣，所以到最后小五看到“宽容是我的修养，但不是你放肆的理由”这句，莫名有种解气的感觉，同时对“说说而已”产生了很大的兴趣，准备去看看，相信有这种感觉的不会是我一个~
技术实现： Pixi.js + Zepto
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
