梦幻西游 + 敦煌博物馆：你的灵魂占比请查收

2019-11-18 H5案例分享 H5案例分享

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

识别图中二维码

你的灵魂占比请查收-查阅二维码

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

案例：你的灵魂占比请查收

品牌：梦幻西游 + 敦煌博物馆

技术实现： pixi.js + tweenMax.js

亮点：

1、创意定位

梦幻西游手游与敦煌博物院一起推出的品牌宣传H5，以敦煌文化里的九色鹿为主线，通过测试的形式，依据九型人格理论生成灵魂占比海报。

2、策划上

① 测试的形式，首屏点击“开启你的人格测试”按钮，进入介绍九型人格学原理介绍，稍停留几秒钟后，自动进入第1题；

② 一共6道题，每道题2-4个答案选项不等，用户点选后，进入下一个问题；

③ 答案选项无所谓正确与错误，根据用户对不同问题的选择，最后给出灵魂占比海报，分析维度：挑战者、艺术家、和平者、改革者、助人者、成就者、热情者、探索者、忠诚者中选出三个维度进行评价百分比；一共有16种可能生出的灵魂占比海报。

3、设计上

敦煌壁画的风格，一看视觉就知道是关于敦煌的H5，画面内容还包含九色鹿。

4、技术上

不是视频，纯技术实现动画效果，使用的是PixiJS进行画面精灵的布局，动画使用TweenMax进行动画的展现。

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

标签