随笔 - 2  文章 - 0  评论 - 5  阅读 - 2637

锤子科技官方首页的特效

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

posted on   德芙牛奶巧克力  阅读(1092)  评论(4编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示