javascript - Javascript 中的视差问题

Question

我正在创建一种视差效果，其中图像和文本的移动方向与鼠标的移动方向相反。这发生在一个名为 parallax-wrapper 的元素中。但是当我移出元素时，我希望图像和文本返回到它们的原始位置。我试图检测元素外的鼠标位置，但由于某种原因它无法正常触发。

codepen 链接是 - https://codepen.io/rohitgd/pen/gRLNad?editors=1010

HTML

<div class="parallax-wrapper">
    <div class="layer" data-mouse-parallax="0.1">
    <img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/>
  </div>
    <div class="layer" data-mouse-parallax="0.3">REVERT</div>
</div>

CSS

    body {
        background-color:#fff;
        padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    }


    .parallax-wrapper {
        width: 500px;
        height: 300px;
        background-color:#0c0c0c;
        position: relative;
        overflow: hidden;

        .layer {
            width: 80%;
            height: 80%;
            position: absolute;
      left: 30px;
            text-align: center;
            line-height: 300px;
            font-size: 38px;
            color:#FFF;
            transition: all 200ms ease-out;
        }

    }

img {
  width: 200px;
  height: 200px;
  position: relative;
  top: 50px;
  right: 70px;
}

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();


    }
});

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

Answer 1

当您的鼠标离开时，您并没有重置转换。您需要在有警报的地方添加它...

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

请注意 mouseleave鼠标离开时触发事件 .parallax-wrapper , 不是 document和以前一样。

这是一个修改过的codepen...

https://codepen.io/anon/pen/ZyBgYJ