當鼠標離開並進入窗口時，如何將圖層從一個位置平滑移動到另一個位置？

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>