Javascript 中的视差问题

debugcn 发表于 Dev

罗希特·吉尔达尔

我正在创建一种视差效果，其中图像和文本的移动方向与鼠标的移动方向相反。这发生在一个叫做 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();


    }
});

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

进程号

我认为选择器是错误的。这是一个正确的版本或查看下面的代码。

当你在室内/室外时，为了更好地展示我改变了背景颜色，这比警报更好。当您离开包装纸（黑色背景）时，它现在可以正确翻转。

在设置 RED 的地方，您可以将变换重置为原点。

// Trying to replicate the effect here - https://tympanus.net/Development/MorphingBackgroundShapes/

$(".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;

  $(".parallax-wrapper").css("background-color", "#00ff00"); // <-- EXIT
  // reset transform here
  
  $("*[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 )" });
  });
});

// this is the selector I changed from "document" to ".parallax-wrapper"
$(".parallax-wrapper").mouseleave(function(e) {
    var target = $(e.target);

    if( !target.is("div.layer")) {
      $(".parallax-wrapper").css("background-color", "#ff0000"); // <-- ENTER
      e.stopPropagation();


    }
});

	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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。