1
イメージとテキストがマウスの動きとは逆方向に移動する視差効果を作成しました。それは、視差ラッパーと呼ばれる要素の内部で起こっています。しかし、私が要素の外に移動すると、イメージとテキストが元の位置に戻るようにします。私は要素の外でマウスの位置を検出しようとしましたが、何らかの理由で正しく発射されませんでした。Javascriptでの視差の問題
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();
}
});
ですパララックスラッパーイメージとテキストは元の位置に戻ります。
ありがとう！これはまさに私が探していたものでした。背景色を変える代わりに、私は@Archerが書いたことをしました。今は完璧に動作します！ –
お手伝いします。あなたのコードには別のバグがありますが、それはCSSのためだと思います。ラッパーを上部に残すと、イベントは発生しません。おそらく位置付けの問題があり、CSSを使用してラッパーを配置する別の方法を使用する必要があります。それは別の問題の問題で、視差などはありません**待ち**またはそうではないかもしれません。私はこれがcodepenでしか起こらないことに気づいた。ここにそれはうまく働いているので – pid
それは間違いなくcodepenの問題です、もしあなたのウェブサイトにもあれば、テストしてください！ – pid