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>