自如：自如生活节，约你花式发光

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

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

识别图中二维码

自如生活节，约你花式发光-查阅二维码

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

案例：自如生活节，约你花式发光

出品：自如

亮点：

策划上，以“反转人生”为出发点，如果，你可以拥有你想拥有的东西，或者生活方式，当你真的拥有了，是否如你想的那么美好嘛。在这支H5中，做了6种如果，如果你想拥有茂密的头发，如果你想整体无所事事，如果你想过上天天数钱的日子，如果你想成为一名有格调的艺术家，如果你可以去骑行看看外面的世界，如果你可以不问世事隐居室外，最后给出与其幻想未来，寻找自己的发光点。结尾给出6个人物角色，点击人物以后，生成一张人物的海报。
设计上，扁平颗粒度风格，插画人物和景物。
技术上，pixi进行景物和人物的绘制，配合Tween.js实现动画效果。pixi的官网地址：http://www.pixijs.com/。
体验上，锁屏横屏观看，不断向右侧滑动浏览更多内容。案例整体节奏不错。

技术实现： pixi.js + Tween.js + Animate.js + Scroller.js + Layer.js

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

标签