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

基于我理解你的意图基本上你需要做的是。

创建一个div容器，其宽度和高度大于窗口大小，并用内容填充
创建宽度和高度等于窗口和溢出的div容器：隐藏并包含1中的容器。
使用@FunctionalInterface public interface Comparator<T> { int compare(T o1, T o2); default int reverseCompare(T o1, T o2) { return compare(o2, o1); } }和transform: translateX(-25%) translateX(-25%);

之后

检测到鼠标位置
计算距窗口中心的距离
并在此基础上添加或删除最多25％的translateX和translateY值

编辑：

transition: transform 1s;

用鼠标移动浏览器

1 个答案: