javascript - 在 mouseout 上保持视差移动一秒钟并平稳停止-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 07:34:30

24

4

我想制作一个像本页一样具有鼠标视差效果的网站http://brightmedia.pl背景鼠标视差是如此平滑..

我有两个问题:

当您将鼠标悬停在某个容器上时，比方说，从左上角，图像会跳转。如何制作流畅的动画？
当鼠标移出容器时，如何让图像移动一点并以流畅的动画停止？

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

基本代码如下:

$('.container').mousemove( function(e){
    var xPos = e.pageX;
    var yPos = e.pageY;

  $('#par1').css({marginLeft: -xPos/20});

});

.container {
  position: relative;
  width: 100%;
  height: 800px;
  background: grey;
  overflow: hidden;
  margin: 0 auto;
}

.container img {
  width: 110%;
  height: 100vh;
  position: absolute;
}

body{
  height: 1000px;
}
h1{
  font-size: 60px;
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css.css">
  </head>
  <body>

<div class="container" id="container">
  <img id="par1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
  <h1>TEXT</h1>

</div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

最佳答案

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

使用 GSAP 解决了问题。下面你可以看到完全按照我想要的方式工作的代码

    let wrap = document.getElementById('container');
  	let request = null;
  	let mouse = { x: 0, y: 0 };
  	let cx = window.innerWidth / 2;
  	let cy = window.innerHeight / 2;
    
  	document.querySelector('.container').addEventListener('mousemove', function(event) {
  		mouse.x = event.pageX;
  		mouse.y = event.pageY;
      cancelAnimationFrame(request);
      request = requestAnimationFrame(update);
  	});
    
  	function update() {
  		dx = mouse.x - cx;
  		dy = mouse.y - cy;
  		let tiltx = (dy / cy );
  		let tilty = - (dx / cx);

      TweenMax.to("#container img", 1, {x:-tilty*20, y:-tiltx*20, rotation:0.01, ease:Power2.easeOut});
    }
    
    window.addEventListener('resize', function(event){
       window.innerWidth / 2;
    	 window.innerHeight / 2;
    });

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.container img {
  width: 110%;
  height: 120vh;
  position: absolute;
}
h1 {
  z-index:100;
  font-size: 6rem;
  z-index: 10;
  color:#333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="container" id="container">
  <img id="par1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
  <h1>GSAP Mouse Parallax</h1>

</div>

关于javascript - 在 mouseout 上保持视差移动一秒钟并平稳停止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49072182/

24

4

0

文章推荐： javascript - 添加到 span 的动画 Angular 色

文章推荐： Python DataFrame 将行转换为列

文章推荐： python - 如何对时间序列数据进行分组

文章推荐： html - CSS 最小高度不根据内容调整大小

jquery - 为什么当鼠标悬停在 mouseOut 目标内的文本上时 .mouseOut() 会触发？
例如，如果我执行 $('div#something').mouseout(function(){}); ，那么当我将鼠标悬停在 #something 内的文本上时，该函数将会触发div 而不是当我离开
html - 在悬停时更改输入的 BGcolor，然后在 mouseout 时返回，但如果输入有焦点，禁用 mouseout BGcolor 更改
我有一个输入，当有人将鼠标悬停在输入上时，我希望它的 BGcolor 变为灰色，然后当他们悬停在输入上时，我希望它的 BGcolor 变回白色(默认颜色)。但我也希望输入的 BGcolor 在输入焦点
javascript - Mouseout 持续不断地发射
所以我有一个分配鼠标悬停的函数，这会向触发它的 div 添加一个悬停工具提示 div 和一个 mouseout 事件，以便我可以删除工具提示。问题是 mouseout 事件会触发，但当我将鼠标移动到
javascript - Mouseout 事件在鼠标实际离开之前触发
我有一个鼠标悬停/鼠标悬停处理程序。两者都使用 JavaScript 超时来延迟他们的工作。但即使鼠标仍在选择器上，也会触发 mouseout 事件。当在 mouseout 脚本中关闭超时时，它可以正
jquery - 如何避免在另一个元素移入时运行事件 "mouseout"？
我正在为一些悬停时的 div 创建自定义动画。像这样: $('.d1').on('mouseover', function () { $('.d2').animate({ 'margin-top'
jQuery 并执行代码直到调用 mouseout
大家好，我的任务是为我们的网站构建一个 slider 。这是我的目标: ... 当一个按钮悬停在上方时，我需要将“ slider ”向左移动 30 像素，当另一个按钮悬停在上方时，需要向右移动
javascript - 为什么当子元素悬停时会触发 mouseout？
奇怪的是当鼠标光标越过子节点时会触发 mouseout 事件。为什么光标还没有离开父节点会出现这种情况呢？请考虑这一点: function someFunc(obj) {
javascript - 嵌套div问题的jquery mouseout
我正在尝试在 div 的鼠标移出时触发一个函数。但是，当您将鼠标悬停在 div 中的某个元素上时，它会触发鼠标移出。 X $("#my_div").mouseout(function (
jquery - 将鼠标悬停在绝对定位的元素上会注册一个 mouseout
See issue here 当我将鼠标悬停在图像上时，它会缩放，但当我将鼠标悬停在标题上时，缩放会重置。它就像绝对定位的元素注册了一个 mouseout。 .tint { overflow:
Jquery mouseout 停止播放？
大家晚上好我不知何故陷入了一个简单的问题，但无法弄清楚如何解决它。我是第一次玩 jquery。现在在 mousenter 上它可以很好地播放音频文件，但我试图实现一个 on mouseout 函数来
CSS3 mouseout 过渡没有按预期工作
我有一些 CSS3 悬停效果来为图像标题设置动画: .imageDetails { width: 100%; height: 360px; position: absolute
javascript - mouseout 事件的问题
我正在使用 JavaScript 来隐藏图像并显示隐藏在图像下的一些文本。但是，当您滚动显示文本时，它会在容器上触发 mouseout 事件，然后隐藏文本并再次显示图像，然后它就进入了一个奇怪的循环。
javascript - 触发 Mouseout 事件取决于窗口大小
我想在 3D 转换的 Canvas 上绘图，但在 Chrome 中的 mouseout 事件有一些奇怪的问题。当我将 JSFiddle 窗口大小设置为 2100px 时，mouseout 事件作为异
javascript - onmouseover -mouseout 图像
我怎么能有两张图片，一张在鼠标悬停时显示，一张在鼠标移出时隐藏？ my box" function showIt(imgsrc) { document.get
jQuery mouseover mouseout 函数跳舞
以下函数会在鼠标悬停时在图库上方打开一个框。问题是它不会停止尝试打开和关闭。这与鼠标在图片周围移动时触发 mouseout 函数有关。真让人气愤。有解决这个问题的想法吗？ $(document).r
jquery - mouseover mouseout 继续执行
我有一个显示为none的div，我想当鼠标移到另一个div上时将其淡入，并在鼠标离开该div时将其淡出。问题是，一旦我查看了 div，无论鼠标是打开还是关闭，div 都会淡入和淡出大约 10 次。大家
jquery - d3 mouseout 改变所选元素的属性
我有 SVG 圆圈和文本元素，当鼠标悬停在...上时它们会改变颜色 var texts = svgcontainer.selectAll('text.year') .data(yeardata).en
jquery - 刷新 .mouseout 上的菜单
我在页面中有一个菜单，我有一个事件类应用于与页面相关的相关菜单项。当另一个菜单项悬停在上方时，此事件类将被重用，并从原始菜单项中删除。如何制作菜单当我从#menu .mouseout 时刷新？最
javascript - jQuery mouseout 效果不起作用。!
我正在开发一个 slider ，当鼠标悬停在 Logo 上时，详细信息将显示，而当鼠标悬停在其父 div 上时，它应该隐藏。 jQuery('.st_inner img').mouseover(fun
javascript - MouseOut/MouseLeave - 下拉菜单上的事件触发器
我在 FireFox 和 IE 11 中遇到了 mouseout 事件的问题。我已经在许多不同的设置上使用 browserstack 测试了该功能，但它表明该功能在 Chrome、Safari、Ope

首页

博学

6Ren·AI

商城

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