錘子科技官方首頁的特效

前段時間同事給我說錘子科技的首頁特效非常驚艷，讓我看下，我一看果然炫酷http://www.smartisan.com.

在網上查了一下，有人說用的是這個插件https://github.com/ariona/hover3d，不過我這邊GITHUB上不去無法驗證。

還有查到是用了parallax這個插件，查了下確實http://www.htmleaf.com/Demo/201508152420.html，不過parallax只實現了圖片層次感的視覺差效果，錘子科技的首頁特效還有個隨滑鼠位置改變形狀的transform的效果.

我找到了一位網友寫的關於這種特效的demo，請看https://imnerd.org/lab/mousemove3d.html，大家可以用用後臺工具看原碼，我這裡貼出來

var origin = {X: document.body.clientWidth/2, Y: document.body.clientHeight/2}, o = document.querySelector('.cover');
    document.addEventListener('mousemove', function(e) {
        var rotate = {x:e.pageY/origin.Y-1, y:1-e.pageX/origin.Y};
        var transform = "rotateX("+rotate.x*10+"deg) rotateY("+rotate.y*10+"deg)";
        o.style.webkitTransform = transform;
        o.style.transform = transform;
    });

其中核心就是

var rotate = {x:e.pageY/origin.Y-1, y:1-e.pageX/origin.Y};

var transform = "rotateX("+rotate.x*10+"deg) rotateY("+rotate.y*10+"deg)";

這兩行，origin是容器中心點的坐標，把滑鼠實時y坐標和中心點Y坐標的比值-1，再附給要變化的元素o的rotateX（結果乘以10再加上deg），rotateY則是倒過來，1減去滑鼠實時X坐標和中心點X坐標的比值，然後把這些綁定到o的mousemove事件上

最後，把parallax視覺差和上述代碼結合起來就能實現錘子科技首頁的特效了