果壳×巴斯夫：点击进入未来实验室，一起乐见城市的未来

2018-12-24 H5案例分享 H5案例分享

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

识别图中二维码

点击进入未来实验室，一起乐见城市的未来-查阅二维码

完整欣赏此案例大约需要52秒

案例：点击进入未来实验室，一起乐见城市的未来

出品：果壳×巴斯夫

亮点：

策划上，这则 H5 以未来城市为主题，结合现有的科学实践为我们展示了一副未来城市的美丽图景。从空气、交通、城市和住宅四个方面来为我们展示科学的进步给城市带来的发展。对每个方面进行介绍的时候都会弹出一个问答界面与用户进行交互，对未来城市进行描绘。完成四个问答之后，会有弹出层让用户填写姓名并根据作答情况生成相应的海报。
设计上，以蓝白为主色调，用沙盘模型的方式来刻画未来城市的样貌。悬浮城市配合沙盘模型的展现方式科技感十足。
技术上，使用 Vue.js 完成场景的切换和数据的传递，利用基于 PIXI.js 封装的组件生成最后的海报页面。答题页卡之间切换时台阶切换的特效很活泼，过渡自然，缓解用户对答题的疲劳情绪。
体验上，整则案例一体性很强，页面间的切换过渡自然，画面唯美，以沙盘模型的方式来表达对未来城市的期许，辅之以绿、橙、浅绿等亮色，使得画面清新活泼，促使用户对未来城市产生兴趣，并进行进一步的探索。

技术实现： Vue.js、PIXI.js、webpack

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

标签