网易：如果时光扭转，你想去哪个食代？

2017-01-10 H5案例分享 H5案例分享

案例：如果时光扭转，你想去哪个食代？

出品：网易

亮点：

策划上，图文展示类，将食代分为5个阶段：土砌火烧灶、公共厨房、独立厨房、定制厨房、嵌入式厨房，每一阶段按照所对应的食代设计界面风格，通过点击了解各食代厨房样式，尾页点击视频播放按钮观看西门子家电直播。
设计上，以蓝色作为主色调，前半部分采用旧报纸风格，比较怀旧，后半部分采用微信朋友圈、直播风格比较现代。
技术上，滑屏采用的是Swiper（JS滑屏插件），土砌火烧灶、独立厨房的展示厨房的动画采用的是CSS3的animation；公共厨房展示厨房的动画采用的是JS控制img的src的切换做成的逐帧动画。

技术实现： Zepto + Swiper

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

识别图中二维码

如果时光扭转，你想去哪个食代？-查阅二维码

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

标签