Aiwatko Aiwatko - 3 months ago 35
jQuery Question

Change div position with translate3d according to the mouse movement

I would like to achieve the effect of subtil div position changes with css transform translate3d according to the mouse movement.
Something like the geometric figures of this website home section:

I tried this:

$(window).mousemove(function(event) {
$(".home-img").css({"left" : event.pageX, "top" : event.pageY});

with a single image positioned absolute and it worked (the image changed position according to the mousemove), however when I try to animate 3 divs with class .basic-skill

$(window).mousemove(function(event) {
$(".basic-skill").css({"left" : event.pageX, "top" : event.pageY});

they go out of the view port (when they are positioned relative) or they overlap one another (when they are positioned absolute).

Moreover, I don't know how to limit the movement to max 5 px instead of making it move all over the view port.

Thanks a lot for your guidance!


Solving your question for the max 5px displacement, you can multiply the X and Y coordinates with a factor like 0.1 to reduce the amount of movement. Like so:

$(".basic-skill").css({"left" : event.pageX * 0.1, "top" : event.pageY * 0.1});