人民日报客户端：向抗洪战士致敬

2016-11-24 H5案例分享 H5案例分享

案例：向抗洪战士致敬

出品：人民日报客户端

亮点：

策划上，3D全景类，采用走心路线，①一个昔日在洪水中被拯救的小男孩今日选择成为抗洪战士，点击去看看“他是谁”；② 以3D全景形式还原了洪灾现场，可点击3D全景里的黑色身形人物，即可看看那些被抗洪战士拯救的人们；③ 点击“18年后，他们在这里”的图标，洪水退去，去看看各位抗洪战士的英雄事迹，抗洪视频剪辑更让人们深刻体会到他们的英勇；④ 拖动沙袋，帮助他们抗击洪水，向抗洪战士致敬。
设计上，写实风格，采用淡灰色作为主色调，3D洪灾场景、抗洪视频剪辑，还原度都极高，让人身临其境，更能体会到抗洪战士们的英勇、不易，给这群最可爱的人点32个赞。
交互上，看3D全景可采用360度转动手机或者上下左右滑动手机的方式，第三屏看各位英雄们的事迹采用的是点击下方的缩略图，显示相应的大图及文字的形式展现。
技术上，3D全景主要采用的是krpanoJS，其他页面主要采用的是Canvas，当然啦，视频部分采用的是html5的Video。

技术实现： Canvas + Egret（白鹭引擎） + krpanoJS

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

识别图中二维码

向抗洪战士致敬-查阅二维码

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

标签