鼠标退出时保持视差移动一秒钟并平稳停止

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

您可以依靠一个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>

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

对于第一个问题：过渡似乎是合适的，与鼠标侦听器相关联。或者更好的是，使用 $(element(.animate(( 函数来设置动画持续时间。这样，您无需为过渡持续时间设置任何值。

对于第二个问题：鼠标退出时的侦听器>相同的过程，但动画较短(对于 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>

相关内容

最新更新

热门标签：