web-dev-qa-db-ja.com

マウスの背景画像を上に移動します（単一視差）

マウスが「ランディングコンテンツ」DIVにあるときに背景画像をX軸とY軸上でわずかに移動させたいのですが、マウスの動きに合わせて移動する必要があります。逆に移動するはずです。例えば。マウスが下に移動し、「ランディングコンテンツ」の画像が上に移動します。

[〜＃〜] html [〜＃〜]

<div id="landing-content">
<section class="slider"> 
<img src="http://i.imgur.com/fVWomWz.png"></img>
</section>
</div>

[〜＃〜] css [〜＃〜]

#landing-content {
overflow: hidden;
background-image: url(http://i.imgur.com/F2FPRMd.jpg);
width: 100%;
background-size: cover;
background-repeat: no-repeat;
max-height: 500px;
border-bottom: solid;
border-bottom-color: #628027;
border-bottom-width: 5px;
}

.slider {
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
max-width: 1002px;
}

.slider img {
width: 80%;
padding-left: 10%;
padding-right: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}

JSFiddlehttp://jsfiddle.net/uMk7m/

どんな助けも感謝します。

jqueryhtmlhtml5css3parallax
11
Simon

このフィドルに示すように、mousemoveイベントを使用できます。 http://jsfiddle.net/X7UwG/

$('#landing-content').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 6);
    var amountMovedY = (e.pageY * -1 / 6);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});

ただし、これは簡単な例です。自分で数字を試してみる必要があります。 ;）

26
Tom Bowers

このように達成できます

$(document).ready(function(){
  $('#landing-content').mousemove(function(e){
    var x = -(e.pageX + this.offsetLeft) / 20;
    var y = -(e.pageY + this.offsetTop) / 20;
    $(this).css('background-position', x + 'px ' + y + 'px');
  });    
});

http://jsfiddle.net/uMk7m/2/

5
MLeFevre

このフィドルを確認してください。欲しいものが見つかると思います。 http://jsfiddle.net/Aveendra/uXPkE/

$('#landing-content').mousemove(function(e){
    $(this).css('background-position',''+e.pageX/10+'px '+e.pageY/10+'px');
});
2
Evo SL