锤子科技官方首页的特效

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了锤子科技官方首页的特效相关的知识,希望对你有一定的参考价值。

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

以上是关于锤子科技官方首页的特效的主要内容,如果未能解决你的问题,请参考以下文章

锤子科技确认卖身,官网微博均变更所属公司

锤子科技t.tt已经升级到Angular 4.0

仿锤子商城首页banner图鼠标跟随及视觉差效果

明年春天见!罗永浩发声:还完债当天就重返科技行业

锤子坚果pro突破京东10万好评,还有什么是锤子科技做不出...

老罗给锤子科技选域名的时候是怎么考虑的?