鎚子科技官方首頁的特效

標籤：github   特效   變化   ota   over   listener   org   首頁   https   

前段時間同事給我說鎚子科技的首頁特效非常驚豔，讓我看下，我一看果然炫酷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視覺差和上述代碼結合起來就能實現鎚子科技首頁的特效了

鎚子科技官方首頁的特效