mouseMove very laggy

Question

I am trying to obtain the image effect that 99designs is obtaining when hovering a mouse over a design.. [99designs.ca] Logo design contest: Runningbug Needs Logo 220626

I am currently obtaining the position of the mouse on mousemove, then using that to move my popover <img>, and everything works fine, but it is very laggy.. and presumably its from so many calls being made.

To get the position of the mouse:

jQuery(document).ready(function(){
   //$("#special").click(function(e){
   $(".imgWrap").mousemove(function(e){
      //$('#status2').html(e.pageX +', '+ e.pageY);
      //alert(e.pageX + ', ' + e.pageY);
      mouseX = e.pageX;
      mouseY = e.pageY;
   }); 
})

I'm not sure of another way I can do this.. any ideas?

On the full course of events is the following:

1. User mouses over an img tag.
2. I get the position of the mouse as per above.
3. The <img> tag also calls a js function which changes the position of an img tag to the position of the mouse.

Actually, you can check it here: pokemonsite

update: I see there is a bounty placed (thanks !). I'm a little busy at the moment and can't check all the other answers, but I'll make sure to check them asap

Answer 1

There are several ways to improve performance when using mousemove events.

1. Use backface-visibility: hidden on popover element to force hardware acceleration. Same thing can be achived with transform: translate3d(0,0,0) but that makes difficult to use CSS transform function (see point #2).

2. Use CSS transform function for absolute positioning to avoid repaints but keep popover element absolute or fixed positioned.

3. When setting inline CSS via JS use requestAnimationFrame to avoid unnecesary layout trashing.

4. (maybe, optionally) hide cursor when hovering and use popover element as position indicator.

5. Move everything you can from JS to CSS ie. :hover state can be used to toggle display of popover element.

I made demo example combining all things listed. There is still some latency between cursor position and popover image and none of example links in original question work so I can't compare against it but I hope someone finds this useful.

DEMO

<div id="imgHolder" class="imgHolder">
    <img src="//placehold.it/200x200" alt="" />
</div>

<div id="bigImgHolder" class="imgHover">
   <img src="//placehold.it/500x500" alt="" />
</div>

 

.imgHover { 
    display: none;
    backface-visibility: hidden;
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
}

.imgHolder:hover ~ .imgHover { display: block; }

// uncomment if it makes sense
//.imgHolder:hover { cursor: none; }

 

var posX, posY;

$('#imgHolder').mousemove(HoverImg);

function HoverImg(e) {
    posX = e.pageX;
    posY = e.pageY;
    window.requestAnimationFrame(showBigImg);  
}

function showBigImg() {
    $('#bigImgHolder').css({'-webkit-transform': 'translateX(' + posX + 'px) translateY(' + posY + 'px)', 'transform': 'translateX(' + posX + 'px) translateY(' + posY + 'px)' });
}

references:

• http://davidwalsh.name/translate3d
• http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
• https://css-tricks.com/using-requestanimationframe/