网易云课堂：你工位有猫，我工位有刀

2018-03-19 H5案例分享 H5案例分享

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

识别图中二维码

你工位有猫，我工位有刀-查阅二维码

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

案例：你工位有猫，我工位有刀

出品：网易云课堂

亮点：

策划上，网易云课堂品牌宣传H5。总体思路，将办公桌和办公桌上的物件分为6组，第一组为三种类型的办公桌，第二组为电脑和书架等，第三组为水杯、咖啡杯等，第四组办公桌上放的抖索精神的物品，第五组小动物，例如猫狗鱼，第六组让心情顺顺的对联。用户通过点击物品，形成一个办公桌，可以是真实办公桌的写照，也可以是理想的办公桌，这个随你！
设计上，卡通漫画风格，每件物品都很小文艺。
交互上，点击选择物品；选择物品后，放大或者缩小调整物品的大小；点击拖动调整物品的位置；点击物品，调整层级，最后点击的物品，层级越高。

技术实现： zepto + iscroll

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

标签