Question

我正在尝试构建类似于this website的鼠标跟踪。使用javascript，jQuery或其他一些库。事实证明，这比我想象的要难。我特别需要帮助来实现步道的动画效果。

var container = document.getElementById("container");
var circle = document.querySelector(".circle");

TweenMax.set(circle, {
  scale: 0,
  xPercent: -50,
  yPercent: -50
});

container.addEventListener("pointerenter", function(e) {
  TweenMax.to(circle, 0.3, {
    scale: 1,
    opacity: 1
  });
  positionCircle(e);
});

container.addEventListener("pointerleave", function(e) {
  TweenMax.to(circle, 0.3, {
    scale: 0,
    opacity: 0
  });
  positionCircle(e);
});

container.addEventListener("pointermove", function(e) {
  positionCircle(e);
});

function positionCircle(e) {
  var rect = container.getBoundingClientRect();
  var relX = e.pageX - container.offsetLeft;
  var relY = e.pageY - container.offsetTop;

  TweenMax.to(circle, 0.3, {
    x: relX,
    y: relY
  });
}

body {
  background: #000;
  margin: 0;
  max-width: 100%;
  width: 100%;
  padding: 0;
}

.section {
  display: block;
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  background: #000;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 80%;
  backface-visibility: hidden;
  pointer-events: none;
  opacity: 1;
  box-shadow: 0 0 50px #fff
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="container" class="section">
  <div class="circle"></div>
</div>

到目前为止，我的尝试是here

Answer 1

我建议您，您在该站点中看到的是没有老鼠踪迹。这是鼠标移动（方向，速度）之间的相互作用，它绘制在占据整个屏幕的基础画布上，并使用带有着色器（如this和遮罩的Three.js进行绘制）。尝试使用Three.js或类似的库，以更简便，更高效的方式获得类似的效果

动画鼠标轨迹

1 个答案: