光明网：心中有数，2017政府工作报告掌中宝来袭

2018-01-25 H5案例分享 H5案例分享

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

识别图中二维码

心中有数，2017政府工作报告掌中宝来袭-查阅二维码

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

案例：心中有数，2017政府工作报告掌中宝来袭

出品：光明网

亮点：

策划上，图文展示类，Loading完毕，出现光明网的LOGO，触碰页面，进入主体内容。一个页面展示4-5个政府报告的方向，对“GDP”、“CPI”、“财政赤字”等15项内容分三屏进行展示，通过左右滑动屏幕浏览；选择一个关注点后，点击进入，内容是2016年的目标及完成情况，以及2017年的目标。左右滑动页面可以看到其他关注点的详细内容。
设计上，此案例整体风格比较简洁。目标等内容的汇报使用柱状图，饼图等多种表现形式，又加上详细的数据，使得表现更加直观。页面的滑动有3D特效。
交互上，页面的点击，左右滑动，用户的参与很多。
技术上，使用了js实现了翻页时的3D旋转特效。

技术实现： hammer.js+css3d.js+ih5工具

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

标签