Jquery || Limiting and smoothing movable div on mouse move

Question

I'm trying to recreate the hover/mouse move effect the statue's in the background have on: http://toyfight.co/

What I've currently got is

  $('.phone-container').on('mousemove',function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetLeft;
          $('.phone-front').css({'right': x}); 
          $('.phone-front').css({'bottom': y}); 

  });

Which makes the phone move, but I don't know how to limit it and create the same smooth effect.

http://codepen.io/salman15/pen/evQVLV

Can one of you guys explain to me how it's best done?

You've got the code that makes it work on toyfight.. read it and find out. — Sam Axe, Mar 30 '17 at 10:07
@SamAxe Don't fully understand what you mean? I don't have the code from toyfight — Salman, Mar 30 '17 at 10:12
@SamAxe Could you please be less vague? :) Because the code I posted isn't the code from toyfight — Salman, Mar 30 '17 at 10:17
I'm glad you found an answer. To be less vague: You've peeked behind the curtain. You know web browsers aren't magic. They consume plain text files (html, javascript). If a web browser can get the code, so can you. — Sam Axe, Mar 30 '17 at 20:20

score 0 · Accepted Answer · edited May 23 '17 at 10:30

I found my answer on another post: Mousemove parallax effect moves position of div

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

Jquery || Limiting and smoothing movable div on mouse move

1 Answers1