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

我认为选择是错误的。 Here's a correct version或查看下面的代码。

为了更好地展示你在室内外的情况，我改变了背景颜色，这比提醒更好。当你离开包装（黑色背景），它现在正确翻转。

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

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

 

 
    } 
 
});

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

 

 
\t .parallax-wrapper { 
 
\t \t width: 500px; 
 
\t \t height: 300px; 
 
\t \t background-color:#0c0c0c; 
 
\t \t position: relative; 
 
\t \t overflow: hidden; 
 
\t \t 
 
\t \t .layer { 
 
\t \t \t width: 80%; 
 
\t \t \t height: 80%; 
 
\t \t \t position: absolute; 
 
     left: 30px; 
 
\t \t \t text-align: center; 
 
\t \t \t line-height: 300px; 
 
\t \t \t font-size: 38px; 
 
\t \t \t color:#FFF; 
 
\t \t \t transition: all 200ms ease-out; 
 
\t \t } 
 
\t \t 
 
\t } 
 

 
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"> 
 
\t <div class="layer" data-mouse-parallax="0.1"> 
 
    <img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/> 
 
    </div> 
 
\t <div class="layer" data-mouse-parallax="0.3">REVERT</div> 
 
</div>

Answer 2

当鼠标离开时，您不会重置转换。你需要在鼠标离开.parallax-wrapper，不document你以前有它添加这个，你有警报...

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

注意，mouseleave事件被触发。

这里有一个修改codepen ...

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

Answer 3

更换$(document).mouseleave与$(".parallax-wrapper").mouseleave。

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

 
$(".parallax-wrapper").mouseleave(function(e) { 
 
     alert('out of the element'); 
 
});

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; 
 
} 
 
.parallax-wrapper .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"> 
 
\t <div class="layer" data-mouse-parallax="0.1"> 
 
    <img src="https://tympanus.net/Development/MorphingBackgroundShapes/img/1.jpg"/> 
 
    </div> 
 
\t <div class="layer" data-mouse-parallax="0.3">REVERT</div> 
 
</div>