mousemove parallax только немного перемещается вместо положения мыши

Question

Я хочу, чтобы самолет и ракета двигались примерно на 5% от их первоначального места, когда мышь попадает в зону героя.

Этот текущий код позволяет обоим изображениям перемещаться и перемещаться там, где находится указатель мыши.

Пожалуйста, помогите.

$(document).ready(function() { 
    $('#hero-panel').mousemove(function (e) { 
     parallax(e, document.getElementById('plane'), 1); 
     parallax(e, document.getElementById('rocket'), 2); 
    }); 
}); 

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

https://jsfiddle.net/jc0807/c5yke2on/

Благодаря

Answer 1

Хорошо, я думаю, что я понимаю, что вы ищете: fiddle

$(document).ready(function() { 
    var plane = document.getElementById('plane'); 
    var rocket = document.getElementById('rocket'); 
    plane.homePos = { x: plane.offsetLeft, y: plane.offsetTop }; 
    rocket.homePos = { x: rocket.offsetLeft, y: rocket.offsetTop }; 

    $('#hero-panel').mousemove(function (e) { 
     parallax(e, document.getElementById('plane'), 10); 
     parallax(e, document.getElementById('rocket'), 20); 
    }); 
}); 

function parallax(e, target, layer) { 
    var x = target.homePos.x - (e.pageX - target.homePos.x)/layer; 
    var y = target.homePos.y - (e.pageY - target.homePos.y)/layer; 
    $(target).offset({ top: y ,left : x }); 
}; 

Что мы делаем здесь, запись в исходное положение плоскости и ракеты в качестве нового свойства «homePos» на плоскости и ракетных объектах. Это облегчает применение эффекта параллакса как смещение с оригинальных позиций на основании расстояния мыши от объекта homePos. Если вы измените значение слоя, переданное на параллакс, величина движения изменится (мы разделим смещение мыши от середины начальной позиции объекта к нему, чтобы вычислить величину смещения нового объекта).

Answer 2

Я предполагаю, что мой вопрос каким-то образом связан с приведенным выше, и я не хотел создавать дубликат.

Я использую следующий код для перехода на изображение на mousemove. Проблема в том, что я не могу заставить изображение заполнить всю видимую область экрана. Я добавил красный контейнер в контейнер, чтобы показать, что я имею в виду. Желаемый результат не должен быть красным.

HTML

<div class="m-scene" id="main"> 
    <div class="scene_element"> 
    <img class="body" src="http://www.planwallpaper.com/static/images/nature-background-images2.jpg" /> 
    </div> 
</div> 

JS

$(document).ready(function() { 
    $('img.body').mousemove(function(e) { 
    parallax(e, this, 1); 
    }); 
}); 

function parallax(e, target, layer) { 
    var layer_coeff = 20/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 
    }); 
}; 

CSS

.m-scene { 
    background-color: red; 
    overflow: hidden; 
    width: 100%; 
} 

.scene_element { 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 

.scene_element img { 
    width: 100%; 
    height: auto; 
    margin-left: auto; 
    margin-right: auto; 
} 

Мои jsFiddle является: fiddle

Спасибо!