网易新闻|哒哒&&缤智：转出你的爱情密语

2018-02-22 H5案例分享 H5案例分享

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

识别图中二维码

转出你的爱情密语-查阅二维码

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

案例：转出你的爱情密语

出品：网易新闻|哒哒&&缤智

亮点：

策划上，横向长图类，Loading完毕，进入首页，页面主体为两个摩天轮，引导用户点击下方的心形按钮，摩天轮旋转，测出爱情类型，进入一张横向长图，向左滑动页面，依次呈现3个该类型的场景漫画。进入最后一页，解析漫画里所蕴藏的爱情运势，露出品牌，同时引导用户长按保存图片、重新测或者分享。
设计上，该H5整体使用了漫画风格，画面色彩丰富，场景动画设置的也比较多；首页搭建了一个游乐场的场景，缤智汽车在该页面以北极熊与企鹅的爱情漫画中均有出现，都作为整体的一部分，品牌漏出比较自然。
交互上，想做滑动屏幕，页面以一镜到底的方式展现表现该类型爱情的漫画，用户参与感比较强。
体验上，小五感觉这个H5的体验还不错，画面颜色比较丰富，细节处理的很细腻。长图漫画整体风格非常可爱，背景音乐和特效音的配合很好。

技术实现： TweenMax.js+pixi.js+zepto.js+createjs.js

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

标签