淘宝造物节-风靡朋友圈的h5怎么做的？

就是这个

给大家炫酷到懵逼了吧

图咋画的啊？

为什么先强调设计？
设计跟技术落地息息相关，不算创意的话，设计是第一股从上游脑袋瓜子流下来的源泉
普遍技术要先看设计-_-#sorry 我水平太low

我感觉，众策划一定会很感兴趣一点就是这玩意图咋画？怎么让设计去搞？
线索

Paste_Image.png

发现没有，懂了吧，360度由分割的场景图组成，那么要分几个够用呢？

我要打20个!

这个也是由分割的5个图组成的

Paste_Image.png

这也是

Paste_Image.png

扒了之后是这样的

原图

这是两张

图图图～突突突

总结
1张蓝色渐变背景
外围360图：20张环切（怎么让我想起某种手术） 每张129*1170
中层：按需求环切
表层：一些琐碎的图片＋触发按钮

咋动的啊？还能点！？

别着急，看看技术栈先……shrekshrek这哥们着实高产～

Paste_Image.png

• bone:backbone的精简版 应该被用来做事件交互和图片联动效果
• jstween 基于时间线做缓动～啥意思?
• css3d-engine 做3d效果的 这里面的360就是它来做的 很多其他类库也都可以

主干力量应该就是这几个了 但不知道为啥又用了zepto~
抠代码？线上项目一定被压缩混淆了……不过大致的思路大家应该有了吧，具体代码我要私下去抠吼吼吼～

init: function() {
                    var t = this;
                    this.$main = $("#main"), h.init(), u.init(this.$main), this.stage = new i.Stage({
                        el: $("#three")[0]
                    }), this.stage.size(640, window.innerHeight).update(), this.root = new i.Sprite(), 
                    this.root.position(0, 0, -600).update(), this.stage.addChild(this.root), s.init(this.root), 
                    this.resize(), window.ua.weixin && window.ups.wid ? (h.on("getwork_success", function() {
                        t.initWork();
                    }), h.doGetWork({
                        id: window.ups.wid
                    })) : this.ready();
                }

说到底呢？

特么的创意最重要！
其次是细节很细致 不然为毛要搞那么多图！！
估计他们看过《红辣椒》
这画风让我第一眼就想起《红辣椒》
心里有谱了嘛？嗯 去忽悠客户吧 $_$

差不多的手法您看这个炫酷嘛？
小肥羊－撩羊

不是我做的 没有利益关系