网易云音乐 + 一汽马自达：走自己的路，你永远独一无二

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

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

识别图中二维码

走自己的路，你永远独一无二-查阅二维码

完整欣赏此案例大约需要3分10秒

案例：走自己的路，你永远独一无二

出品：网易云音乐 + 一汽马自达

亮点：

策划上，加载界面是一个小人走路上走着，之后的界面都是这个小人的经历；第一页是整个h5的主题，走自己的路；之后跳转到下一个界面，根据提示长按下方指纹部分，开始探索；之后的界面，每个界面上都是人生的经历，点击屏幕就可以到下一界面，有的经历会配上一首符合情景的音乐；根据提示点击开始，播放视频，视频内容跟选择有关，自己的路与旁人无关，无论怎么艰难都要坚持；播放完成后点击屏幕进入下一界面，下方有两个按钮，点击回顾是马自达的活动回顾。
设计上，深蓝背景，整体色调偏暗，主角和文字部分很突出，画风很有代入感，也留给观众想象空间。动画之间衔接流畅、自然，没有交互时循环播放动画也让画面充满活力。
体验上，音乐播放时，没有提示用户点击屏幕可以继续操作，到这里用户可能会有点懵。整体还是一个相当棒的案例，选材很励志，视觉效果也很赞。内容激励人生，鼓励着人成长。

技术实现： jQuery + Tweenmax

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

标签