Jeep：一首歌Hold住人生大场面

2018-10-16 H5案例分享 H5案例分享

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

识别图中二维码

一首歌Hold住人生大场面-查阅二维码

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

案例：一首歌Hold住人生大场面

出品：Jeep

亮点：

创意定位，全新Jeep线上活动，以“一首歌hold住人生大场面”为题，通过六个场景问题用歌名作答，生成相应文案海报的方式吸引用户参与和传播。
策划逻辑，大致分四部分：① loading 部分，显示场景带入文案；② 主题页，用户输入姓名，参与活动；③ 六个场景测试题，用歌曲名称做选项，用人们在汽车中的场景动画为背景，软性植入产品；④ 出结果前有过场动画，有Jeep产品植入，结果海报页包含：品牌露出，测评结果（文案+图），回流二维码；底部有分享、参与抽奖留资以及跳转到网易歌单三种二次传播选择。
设计上，用手绘漫画来表现各个问题场景；交互上，点击选项答题完成，切换场景时，会有转场特效：圆圈扩大擦屏效果。
体验上，答题转场效果不错，很流畅的体验各种温馨场景下遇到的麻烦。不过，对于没有结婚，不拥有Jeep车的人，哪里会有车里的这些音乐场景？

技术实现： pixi.js+ TweenMax + Vue

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

标签