央视新闻移动网：铸魂

2017-08-17 H5案例分享 H5案例分享

案例：铸魂

出品：央视新闻移动网

亮点：

策划上，建军节类，用横向长幅的形式展现我军发展历程；① 在用户向右滑动的过程中，以图文结合的方式将人民军队史上的重大事件一一展现；② 用户点击左上角的的放映机按钮，将播放相应的视频，这种多维度的展现方式让用户能够充分的了解到发展历史；③ 最后尾页才低调呈现央视移动新闻网。
设计上，怀旧风格，采用棕色作为主色调，酒红色作为辅色调，里面的元素随着滑动的位置依次出现，并伴随着相应的文案，再配上相应的语音解说，简洁清晰直观。
技术上，图片预加载采用的是CreaseJs类库中的资源加载类库PreloadJS；长图左右滑动是用jquery.mousewheel.js来实现的；里面的动画主要采用的是CSS3的animation。

技术实现： jQuery + PreloadJS + jquery.mousewheel.js

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

识别图中二维码

铸魂-查阅二维码

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

标签