web-dev-qa-db-ja.com

マウスムーブの視差効果によりdivの位置が移動する

わずかな視差効果を作成しようとしています（それが本当に視差を構成するかどうかはわかりませんが、同様の考え方です）。マウスを動かすと、わずかに異なる速度で動き回る4つのレイヤーがあります。

私は私が欲しいものに似たものを提供する素晴らしい例を見つけました：

http://jsfiddle.net/X7UwG/2/

これは、マウスが移動したときに#landing-content divの背景の位置をシフトすることで実現します。

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

ただし、これをbackground-positionシフトではなくdiv位置シフトで機能させる方法は考えられません。例：position:relative;およびtop:xを使用すると、div自体が少し動き回ります。

私の考えでは、divにはCSSアニメーション要素が含まれているため、背景画像ではなく、コンテンツを含むdivである必要があります。

上記のコードを使用してこれの解決策はありますか？

jquerycssparallax
9
Francesca

代わりにjQuery.offSet（）を使用するのはどうですか？あなたは数学/値を調整したいかもしれませんが、私はそれがあなたを正しい方向に設定するべきだと思います。

$(document).ready(function () {
    $('#layer-one').mousemove(function (e) {
        parallax(e, this, 1);
        parallax(e, document.getElementById('layer-two'), 2);
        parallax(e, document.getElementById('layer-three'), 3);
    });
});

function parallax(e, target, layer) {
    var layer_coeff = 10 / layer;
    var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
    var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
    $(target).offset({ top: y ,left : x });
};

JSFiddle： http://jsfiddle.net/X7UwG/854/

15
Josh Bilderback