锤子科技官方首页的特效

Posted 2020-08-19

前段时间同事给我说锤子科技的首页特效非常惊艳，让我看下，我一看果然炫酷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视觉差和上述代码结合起来就能实现锤子科技首页的特效了