javascript - 用鼠标移动浏览器

Question

我想尝试做点什么like this内容离开屏幕的位置，当您移动鼠标时，浏览器会跟随它移动。我在想它会类似于 this当鼠标移动时，屏幕边缘会出现动画。

在原始示例中，他们似乎使用 JS 来更改 transform: matrix。在第二个链接上，屏幕使用 greensock 和以下代码更改 CSS 进行动画处理:

// Mouse move tilt effect
$(document).mousemove(function(event){

    // Detect mouse position
    var xPos = (event.clientX/$(window).width())-0.5;
    var yPos = (event.clientY/$(window).height())-0.5;

    // Tilt the hero container
    TweenLite.to($hero, 0.6, {rotationY:5*xPos, rotationX:5*yPos, ease:Power1.easeOut, transformPerspective:900, transformOrigin:"center"});

    // Update text on the page with the current mouse position
    $(".bottom strong").text(event.pageX + ", " + event.pageY);
});

是否可以做类似的事情来做我需要的事情？

Answer 1

根据我对您的意图的理解，基本上您需要做的是。

1. 创建一个宽度和高度大于窗口大小的div容器并填充内容
2. 创建宽度和高度等于 window 和 overflow: hidden 并包含 1 中的容器的 div 容器。
3. 使用 transform: transformX(-25%) translateX(-25%); 和 transition: transform 1s;
将容器置于 1 in 2 中

之后

1. 检测到鼠标位置
2. 计算距窗口中心的距离
3. 并在此基础上对 translateX 和 translateY 值最多增加或减少 25%

编辑:

document.querySelector('body').style.transition = 'transform 1s';

window.addEventListener('mousemove', event => {
  const absMaxX = window.innerWidth / 2;
  const absMaxY = window.innerHeight / 2;

  const maxDistance = Math.sqrt(Math.pow(absMaxX, 2) + Math.pow(absMaxY, 2));

  const mouseX = event.clientX;
  const mouseY = event.clientY;

  const directionX = mouseX - absMaxX >= 0 ? 1 : -1;
  const directionY = mouseY - absMaxY >= 0 ? 1 : -1;

  const distance = Math.sqrt(Math.pow(mouseX - absMaxX, 2) + Math.pow(mouseY - absMaxY, 2))  
  const translation = distance / maxDistance * 100;

  document.querySelector('body').style.transform =
    `translateX(${directionX * translation}px) translateY(${directionY * translation}px)`
});