网易新闻 | 哒哒:逃不掉的四字魔咒

2017-09-15 H5案例分享 H5案例分享
网易新闻 | 哒哒:逃不掉的四字魔咒

案例:逃不掉的四字魔咒

出品:网易新闻 | 哒哒

亮点:

  1. 策划上,一镜到底+横向滑动。进入案例,提示向左滑动屏幕展开动画。向左滑动时,动画正向播放,向右滑动则会倒放。案例讲述一个人回忆起从小到大,在家庭、学校、职场等各种地方,所遭遇的各种“四字魔咒”。老妈不让看电视,不让画画,“毕竟长辈,为了你好”;准备睡觉,室友却在玩游戏、弹吉他、大声打电话,但“同学一场,算了算了”;准备下班,领导却发消息让你做完表格再走,“初入职场,习惯就好”…这些四字魔咒从小到大,一直在陪伴着自己,每个年龄段对应不同的内容。随着“主角”头发慢慢变白、脱下,步入老年,画面也到达结尾页,露出“网易新闻×米果”和“说说而已-网络首档怼人短视频”。用户可以“点击观看”下载网易新闻客户端,也可以选择“再看一遍”。

 

  1. 设计上,背景色调大多时是深蓝,即场景大多时是夜晚(往往这个时候人们的情绪最复杂)。横向滑动配合视差效果,展示了一出与众不同的动画,网易真的把“长图滑动”这个交互形式,玩出了各种花样。背景音乐,选用了09年的法国电影《尽情游戏》的插曲《Larrons En Foire》,电影本身讽刺意味就很浓,所以这首BGM与案例主题和整体的感觉也都非常契合。

 

  1. 体验上,从老人的眼睛进入,营造了回忆的感觉,最后再从眼睛里出来,整体有头有尾,完整性很好。滑动时的缓冲效果,让案例很有线条感,给了用户很好的交互体验。动画使用js做了硬件加速,因此在体验时完全没有卡顿的感觉。回到内容,案例讲述的东西是大多数人都会经历(遭受)的,很能让人产生共鸣,所以到最后小五看到“宽容是我的修养,但不是你放肆的理由”这句,莫名有种解气的感觉,同时对“说说而已”产生了很大的兴趣,准备去看看,相信有这种感觉的不会是我一个~



技术实现: Pixi.js + Zepto



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

识别图中二维码

逃不掉的四字魔咒-查阅二维码




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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

网易新闻 | 哒哒:纪念哈利波特20周年

网易新闻+哒哒:这是成年人不敢打开的童年

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~