javascript - 当鼠标离开和进入窗口时，如何平滑地将图层从一个位置移动到另一个位置？

Question

我正在改进视差效果，尝试使用鼠标离开和进入窗口的位置在两个位置之间创建平滑过渡。如果您注意到 JSFiddle 有一个“pop”，我想将其替换为过渡。我怎样才能做到这一点？

$(document).ready(function() {
  $('#layer-one').mousemove(function(e) {
    parallax(e, this, 1);
    parallax(e, document.getElementById('layer-two'), 2);
    parallax(e, document.getElementById('layer-three'), 3);
  });
});

function parallax(e, target, layer) {
  var layer_coeff = 10 / layer;
  var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
  var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
  $(target).offset({
    top: y,
    left: x
  });
};

JSFiddle

提前谢谢您。

Answer 1

也许，您可以使用 GSAP 库使偏移效果更平滑，这只是一个快速示例，请尝试一下:

var initPos = $('#layer-one').position();

$(document).ready(function() {
  $('#layer-one').mousemove(function(e) {
    parallax(e, this, 1);
    parallax(e, document.getElementById('layer-two'), 2);
    parallax(e, document.getElementById('layer-three'), 3);
  });
});

function parallax(e, target, layer) {
  var layer_coeff = 10 / layer;
  var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
  var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
  
  /*$(target).offset({
    top: y,
    left: x
  });*/
  TweenLite.to($(target), 2, {x:x, y:y});
};

document.onmouseleave = function() {
  $("#layer-one").animate({
    opacity: 0.4,
    left: 10,
  }, 'fast');
};

.layer {
  padding: 20px;
  color: white;
}

#base-layer {
  overflow: hidden;
}

#layer-one {
  background: red;
}

#layer-two {
  background: green;
}

#layer-three {
  background: blue;
}

.slider {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding-top: 200px;
}

.slider img {
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="base-layer">
  <div id="layer-one" class="layer">
    Content
    <div id="layer-two" class="layer">
      Content
      <div id="layer-three" class="layer">
        Content
        <section class="slider">
          <img src="http://i.imgur.com/fVWomWz.png">
        </section>
      </div>
    </div>
  </div>
</div>