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

Question

我想做一个像这个页面一样有鼠标视差效果的网站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>

Answer 1

正如 Temani 所说，使用过渡并最终延迟应该可以完成这项工作。

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

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

这也应该给你一些想法： https://codepen.io/Aldlevine/pen/Jowke

基于以下代码示例的 Teemani：

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

  $('#par1').css("margin-left", -xPos / 10);

});
$('.container').mouseenter(function(e) {
  var xPos = e.pageX;
  var yPos = e.pageY;
  $('#par1').css("margin-left", -xPos / 10);
});
$('.container').mouseleave(function(e) {
  $('#par1').css({"transition": "margin-left 1s ease-in-out", "margin-left": "0"});
  setTimeout( function() {
    $('#par1').css("transition", "initial");
  }, 500);
});

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

.container img {
  width: 110%;
  height: 100vh;
  position: absolute;
  transition: margin-left 0.2s;
/*  transition: margin-left 0.2s ease-in-out 0.2s;*/
}

body {
  height: 1000px;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>TEXT</h1>

</div>

Answer 2

你可以靠一个mouseenter / mouseleave来添加动画：

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

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

});
$('.container').mouseenter(function(e) {
  var xPos = e.pageX;
  var yPos = e.pageY;
  $('#par1').animate({
    "marginLeft": -xPos / 10
  }, "slow");
});
$('.container').mouseleave(function(e) {
  $('#par1').animate({
    "marginLeft": "0"
  }, "slow");
});

.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%);
}

<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>

Answer 3

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

问题已通过使用 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>

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

Keep parallax moving for one second on mouseout and stop smoothly

javascript

css

mouse

jquery

parallax