金典：遇见自己的专属之旅

2017-12-28 H5案例分享 H5案例分享

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

识别图中二维码

遇见自己的专属之旅-查阅二维码

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

案例：遇见自己的专属之旅

出品：金典

亮点：

策划上，视频类，进入首页上有标题：金典佳节，邀享专属之旅，选择你的身份，开启你的专属旅程，下方有四个选项：理性王者、热血战士、生活诗人、大探索家，选择一个选项就会开始视频，拖动圆点继续视频，拖动三分之一时画面改变，拖动到一周时点击开始旅程就会进入关注伊利牛奶页面。
设计上，分为四种可选择的性格，不同的性格不同的画面这种设计是很合理的，因为不同性格的人所喜欢的旅行也不同，所以这样的设计更为优秀。画面精致唯美，一看就很有想去的欲望（四种都想去），所以就来关注金典牛奶吧！
交互上,可以选择四个选项，拖动小球进行视频，尾页可以长按二维码关注金典开启旅程。

技术实现： JavaScript+cdn.js+tween.js+moment.js

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

标签