网易新闻 | 哒哒:制作你的饲养手册

网易新闻 | 哒哒:制作你的饲养手册_第1张图片

案例赏析链接:http://h5.dada.163.com/163/html/news/2019_feed_3/index.html

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

案例:制作你的饲养手册

品牌:网易新闻 | 哒哒

亮点:

1. 创意策划上

以“饲养手册”为出发点,测试类h5。会有7个问题,通过不断向上滑动,不是一屏屏切换的方式,在不知不觉中回答了问题(因为问题比较有趣,所以感觉时间一下就过去了),最后生成一张专属的你的习性和注意事项的海报(海报里的内容,都与刚刚你回答的问题有关)。


2. 设计上

设计抽象派风格,和网易以前的某些作品,风格是保持一致的,例如《测测你的哲学气质》。


3. 技术上

使用PixiJS实现本案例,是超快的2D渲染引擎。案例中的动画,使用PixiJS创建的舞台canvas,配合tween.js实现。用户滑动屏幕,获取用户的触点,使用的是原生的e.originalEvent.touches[0].pageY获取用户触点Y轴坐标,判断用户滑动。不知道你感觉到当我们手指离开屏幕后,页面还有一小段缓冲的细节吗?使用的依然是tween.js的TWEEN.Tween实现。


4. 体验上

微信下无法观看,需要直接访问链接 http://h5.dada.163.com/163/html/news/2019_feed_3/index.html 在手机端浏览器中观看。

技术实现: pixi.js + tween.js

网易新闻 | 哒哒:制作你的饲养手册_第2张图片

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

你可能感兴趣的:(网易新闻 | 哒哒:制作你的饲养手册)