Mousemove + translate3d?

Lord, tell me please. I have open popup with big image. I need to see if running the mouse on the screen image is moved up / down based on where the mouse is exactly the opposite. That sketched, attached, but I have issues with math so I think I wrote the slag. The problem is that you need to orientirovat this is the image in the center of the screen after moving the mouse to move it. An example of what you need: https://www.net-a-porter.com/ru/en/product/637841

What we have now:

$('.zoom').on('click',function(e){
e.preventDefault();

 var image = $(this).attr('href');

 $('body').append('<div class="full-image-wrap"><div class="close-modal" onclick="hideFullImage(this)"></div><div class="full-image-inner"><div class="full-image"><img src="' + image + '"></div></div></div>')

$('.full-image').mousemove(function(e){

 var $that = $(this);

$('body').css("overflow","hidden");

 var pageY = e.pageY,
 imageHeight = $that.find('img').height(),
 docHeight = $(window).height(),
 cf = imageHeight / docHeight,
 posY = cf * pageY / 2;

console.log(posY);

 $(this).find('img').css({"transform": "translate3d(0px, -" + posY + "px, 0px)"});
})
 });
July 9th 19 at 13:44
1 answer
July 9th 19 at 13:46

Find more questions by tags jQuery