javascript - jQuery:延迟跟随光标

Question

我想要一个 div 跟随光标移动并有短暂的延迟，如下所示:http://vanderlanth.io/

如您所见，“跟随者”的动画有短暂的延迟。

我重建了一些运行不佳的功能:

$(document).ready(function () {

    $("body").mousemove(function (e) {
        handleMouseMove(e);
    });

    function handleMouseMove(event) {

        var x = event.pageX;
        var y = event.pageY;

        $(".cursor-follower").animate({
            left: (x - 16),
            top: (y - 16)
        }, 16);

        $(".cursor").css({
            left: (x - 4),
            top: (y - 4)
        });
    }
});

它相当滞后，动画也不是很流畅和轻松。您还有其他解决方案吗？

Answer 1

您可以通过 CSS 过渡来实现此效果。在 JavaScript 中，您只需更新 div 的位置。

$(document).on('mousemove', (event) => {
  $('.follower').css({
    left: event.clientX,
    top: event.clientY,
  });
});

.follower {
  width: 20px;
  height: 20px;
  background-color: grey;
  border-radius: 10px;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  position: fixed;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follower"></div>