Javascript中的视差问题

我正在创建一个视差效果，其中图像和文本与鼠标的移动方向相反。这是在一个叫做视差包装器的元素中发生的。但是当我移出元素时，我希望图像和文本返回到它们原来的位置。我曾试图检测鼠标在元素外的位置，但由于某些原因，它没有正常启动

代码笔链接是-

HTML

Javascript

$(".parallax-wrapper").mousemove(function(e) {
  var x = e.pageX - $(this).offset().left - $(this).width() / 2;
  var y = e.pageY - $(this).offset().top - $(this).height() / 2;

  $("*[data-mouse-parallax]").each(function() {
    var factor = parseFloat($(this).data("mouse-parallax"));
    x = -x * factor;
    y = -y * factor;

    $(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
  });
});

$(document).mouseleave(function(e) {
    var target = $(e.target);

    if( !target.is("div.layer")) {
      alert('out of the element');
      e.stopPropagation();


    }
});

---

我想要的是，当鼠标位于视差包装之外时，图像和文本将返回到其原始位置。

鼠标离开时，您不会重置转换。您需要将此添加到您有警报的位置

$(".parallax-wrapper").mouseleave(function(e) {
  $("*[data-mouse-parallax]").each(function() {
    $(this).css({ transform: "translate3d( 0, 0, 0 )" });
  });
});

请注意，

mouseleave

事件是在鼠标离开

.parallax wrapper

时触发的，而不是以前的

文档

这是一个修改过的密码笔

---

我认为选择器错了。或者参见下面的代码

为了在室内/室外时更好地显示，我更改了背景颜色，这比警报要好。当您离开包装器（黑色背景）时，它现在会正确翻转

如果设置了红色，则可以将变换重置为原点

//尝试在此处复制效果-https://tympanus.net/Development/MorphingBackgroundShapes/
$（“.parallax wrapper”）.mousemove（函数（e）{
var x=e.pageX-$（此）.offset（）.left-$（此）.width（）/2；
var y=e.pageY-$（this.offset（）.top-$（this.height（）/2；
$（“.parallax wrapper”）.css（“背景色”，“#00ff00”）/将
$（文档）.mouseleave
替换为
$（“.parallax wrapper”）.mouseleave


$（“.parallax wrapper”）.mousemove（函数（e）{
var x=e.pageX-$（此）.offset（）.left-$（此）.width（）/2；
var y=e.pageY-$（this.offset（）.top-$（this.height（）/2；
$（“*[数据鼠标视差]”）。每个（函数（）{
var factor=parseFloat（$（this）.data（“鼠标视差”）；
x=-x*因子；
y=-y*因子；
$（this.css（{transform:“translate3d（“+x+”px，“+y+”px，0）”））；
});
});
$（“.parallax wrapper”）.mouseleave（函数（e）{
警报（“元素外”）；
})；
正文{
背景色：#fff；
填充：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.视差包装{
宽度：500px；
高度：300px；
背景色：#0c；
位置：相对位置；
溢出：隐藏；
}
视差包装层{
宽度：80%；
身高：80%；
位置：绝对位置；
左：30px；
文本对齐：居中；
线高：300px；
字号：38px；
颜色：#FFF；
过渡：所有200毫秒的速度都变慢；
}
img{
宽度：200px；
高度：200px；
位置：相对位置；
顶部：50px；
右：70px；
}

还原
我认为在这种情况下最好使用
.mouseout（）
case@Chiller这将在鼠标离开子元素时触发事件处理程序。在这种情况下，
mouseleave
更简单、更干净（这意味着你不必处理和忽略那些额外的事件）。谢谢你的回答。我将你的答案与@pid的答案结合起来。现在它完全按照预期工作了！不用担心-很高兴它有帮助：）非常感谢！这正是我要找的。我没有改变背景颜色，而是按照@Archer写的做了。现在它工作得非常好！很高兴能提供帮助。但是你的代码中有另一个错误，我认为这是因为CSS。当你把包装器放在顶部时，它不会触发事件。很可能是因为定位问题，所以你应该用一种不同的方式通过CSS定位包装器。但这是另一个问题，没有视差等。等等，也许没有。我注意到这只发生在codepen上。在这里，它工作正常。这肯定是codepen的问题，测试它是否也出现在你的网站上！是的，这只是codepen上的问题。在任何地方都工作正常谢谢你的回答！
$(".parallax-wrapper").mousemove(function(e) {
  var x = e.pageX - $(this).offset().left - $(this).width() / 2;
  var y = e.pageY - $(this).offset().top - $(this).height() / 2;

  $("*[data-mouse-parallax]").each(function() {
    var factor = parseFloat($(this).data("mouse-parallax"));
    x = -x * factor;
    y = -y * factor;

    $(this).css({ transform: "translate3d( " + x + "px, " + y + "px, 0 )" });
  });
});

$(document).mouseleave(function(e) {
    var target = $(e.target);

    if( !target.is("div.layer")) {
      alert('out of the element');
      e.stopPropagation();


    }
});

$(".parallax-wrapper").mouseleave(function(e) {
  $("*[data-mouse-parallax]").each(function() {
    $(this).css({ transform: "translate3d( 0, 0, 0 )" });
  });
});