Javascript 在mouseout上保持视差移动一秒钟并平稳停止

我想做一个有鼠标视差效果的网站，就像在这个页面背景下鼠标视差是如此平滑

我有两个问题：

当您将鼠标从左上角滑过容器时，图像会跳转。如何制作平滑动画

当您将鼠标移出容器时，如何使图像移动一点并以平滑动画停止

解决这些问题的代码是什么

以下是基本代码：

$'.container'.mousemove函数{ var xPos=e.pageX； var yPos=e.pageY； $'par1'.css{marginLeft:-xPos/20}； }; .集装箱{ 位置：相对位置； 宽度：100%； 高度：800px； 背景：灰色； 溢出：隐藏； 保证金：0自动； } .集装箱img{ 宽度：110%； 高度：100vh； 位置：绝对位置； } 身体{ 高度：1000px； } h1{ 字体大小：60px； z指数：10； 位置：绝对位置； 左：50%； 最高：30%； 转化：转化-50%，-50%； } 文本

---

正如特马尼所说，玩弄过渡并最终拖延应该能起到作用

对于第一个问题：转换似乎是合适的，与mousein侦听器相关。或者更好地使用$element.animate函数来设置动画持续时间。这样，就不会为过渡持续时间设置任何值

对于第二个问题：鼠标上的侦听器>相同的过程，但img移动的动画以及动画持续时间更短

这也会给你一些想法：

基于Teemani的以下代码示例：

$'.container'.MouseMoveFunction{ var xPos=e.pageX； var yPos=e.pageY； $'par1'。cssmargin左，-xPos/10； }; $'.container'.mouseenterfunction{ var xPos=e.pageX； var yPos=e.pageY； $'par1'。cssmargin左，-xPos/10； }; $'.container'.mouseleavefunction{ $'par1'.css{transition:marginleft 1s ease in out，marginleft:0}； 设置超时功能{ $'par1'.cs转换，首字母； }, 500; }; .集装箱{ 位置：相对位置； 宽度：100%； 高度：800px； 背景：灰色； 溢出：隐藏； 保证金：0自动； } .集装箱img{ 宽度：110%； 高度：100vh； 位置：绝对位置； 过渡：左边距0.2s； /*过渡：左边距0.2秒，缓进缓出0.2秒*/ } 身体{ 高度：1000px； } h1{ 字体大小：60px； z指数：10； 位置：绝对位置； 左：50%； 最高：30%； 转化：转化-50%，-50%； } 文本 可以使用一个mouseenter/mouseleave添加动画：

$'.container'.MouseMoveFunction{ var xPos=e.pageX； var yPos=e.pageY； $'par1'.css{ 边际收益：-xPos/10 }; }; $'.container'.mouseenterfunction{ var xPos=e.pageX； var yPos=e.pageY； $'par1'。设置动画{ 边际收益：-xPos/10 }，慢； }; $'.container'.mouseleavefunction{ $'par1'。设置动画{ 边缘左侧：0 }，慢； }; .集装箱{ 位置：相对位置； 宽度：100%； 高度：800px； 背景：灰色； 溢出：隐藏； 保证金：0自动； } .集装箱img{ 宽度：110%； 高度：100vh； 位置：绝对位置； } 身体{ 高度：1000px； } h1{ 字体大小：60px； z指数：10； 位置：绝对位置； 左：50%； 最高：30%； 转化：转化-50%，-50%； } 文本

---

因为我很久以前就解决了这个问题，我忘记了这篇文章，所以我决定更新答案。也许这对其他人会有帮助

使用GSAP解决了这个问题。下面您可以看到的代码完全符合我的要求

让wrap=document.getElementById'container'； 让请求=null； 让鼠标={x:0，y:0}； 设cx=window.innerWidth/2； 设cy=window.innerHeight/2； document.querySelector.container.addEventListener'mousemove'，functionevent{ mouse.x=event.pageX； mouse.y=event.pageY； 取消动画帧请求； request=requestAnimationFrameupdate； }; 功能更新{ dx=鼠标.x-cx； dy=mouse.y-cy； 设tiltx=dy/cy； 设tilty=-dx/cx； TweenMax.tocontainer img，1，{x:-tilty*20，y:-tiltx*20，旋转：0.01，ease:Power2.easeOut}； } window.addEventListener'resize'，functionevent{ window.innerWidth/2； window.innerHeight/2； }; * { 保证金：0； 填充：0； 框大小：边框框； } .集装箱{ 位置：相对位置； 宽度：100%； 高度：100vh； 溢出：隐藏； 显示器：flex； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； } .集装箱img{ 宽度：110%； 高度：120vh； 位置：绝对位置； } h1{ z指数：100； 字号：6rem； z指数：10； 颜色：333； } GSAP鼠标视差

---

将转换添加到CSSDid，您尝试过吗？如果我放置了转场，并且每次我移动鼠标，转场都会被触发，图像几乎不会移动。你试过了吗？->如果我问你同样的问题：。。。我从来没有打算简单地添加过渡，它会神奇地工作。。。我是说

---

你可以考虑转换，并详细阐述你的代码来获得你想要的东西，我提到我是入门级的，但我真的很想学习！如果你能给我一个代码示例，我会更清楚你想给我什么建议。有没有代码示例如何“玩”转换？因为我试过使用transition和jquery动画，但每次我移动鼠标时都会出现Stuck和Lapping。也感谢您的帮助，但这也不太好。我正在寻找平滑鼠标视差像在这个页面平滑背景视差谢谢你的帮助，但这不是很好。我正在尝试实现鼠标视差效果，就像在这个页面背景视差是超级平滑@MantvydasBinderis在这种情况下，我的建议是使用插件。。。这样的放松效果不容易实现，也不需要重新发明轮子，有一个众所周知的插件。。这里有一个例子Temani，但没有插件是很难使这样的鼠标视差？因为我想自己学习如何在没有任何插件帮助的情况下编写代码。@MantvydasBinderis嗯，这并不难：但也不容易。。。我将编辑我的答案以显示更好的示例。。我认为，如果很容易使图像在x轴上移动，那么在这个例子中不需要y轴，这取决于鼠标，所以我认为当我将鼠标从右上角或左上角移过容器时，也可以很容易地修复这些跳跃，并在将鼠标移出容器时添加平滑过渡。。思维专家会给我看两行代码，解决我的问题，但它看起来更复杂。。但是仍然不想使用插件。。。