用鼠标移动浏览器

Question

我想尝试做一些 like this where the content is off the screen and when you move the mouse the browser follows it around. I was thinking it would be similar to this 当鼠标移动时屏幕边缘动画的地方。

在原来的例子中，他们似乎使用 JS 来更改 transform: matrix。在第二个 link 屏幕上使用 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

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

创建一个 div 宽度和高度大于 window 大小的容器并用内容填充它
创建 div 宽度和高度等于 window 且溢出：隐藏并包含 1 中的容器的容器。
1 合 2 的中心容器 transform: translateX(-25%) translateX(-25%); 和 transition: transform 1s;

之后

检测到鼠标位置
计算距 window
并在此基础上增加或减少 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)`
});

用鼠标移动浏览器

Move browser with mouse

javascript

css

transform

mouseevent

mouselistener