我想尝试做点什么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);
});
是否可以做类似的事情来做我需要的事情?
最佳答案
根据我对您的意图的理解,基本上您需要做的是。
- 创建一个宽度和高度大于窗口大小的div容器并填充内容
- 创建宽度和高度等于 window 和 overflow: hidden 并包含 1 中的容器的 div 容器。
- 使用
transform: transformX(-25%) translateX(-25%);
和transition: transform 1s;
将容器置于 1 in 2 中
之后
- 检测到鼠标位置
- 计算距窗口中心的距离
- 并在此基础上对 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)`
});
关于javascript - 用鼠标移动浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38325369/