锤子科技官方首页的特效
前段时间同事给我说锤子科技的首页特效非常惊艳,让我看下,我一看果然炫酷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视觉差和上述代码结合起来就能实现锤子科技首页的特效了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥