网易：值得回忆的不仅是新闻

2018-11-11 H5案例分享 H5案例分享

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

识别图中二维码

值得回忆的不仅是新闻-查阅二维码

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

案例：值得回忆的不仅是新闻

出品：网易

亮点：

策划上，以回忆为主，从2003、2004年开始，中国第一个载人火箭升空、刘翔110米栏夺金，一直到2017年，一共为我们整理了20个大事记，最后给出网易新闻|跟帖的品牌，网易已经陪伴我们20年了！
设计上，太空的大背景，以时间轴的形式，展示每年的大事记。
交互上，放大手势，查看下一个时间年份；点击事件图片，查看事件的细节，可以将事件图片保存，分享朋友圈。
技术上，运用的JS手势库hammer.js。这里是对hammer.js的详细文章介绍。hammer为我们提供的手势如下：

Rotate 实现旋转效果，如旋转图片

Pinch/Zoom 放大、缩小（本案例使用的就是Pinch手势）

Press 长时间按压触发效果

Pan 左右滑动

Tap 点击

Swipe 滑动

技术实现： hammer.js + zepto.js

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

标签