CSS Transforms for better performance

[g-van-vreckem]

Replace

...
hShift = focusOffsetX * -1;
...
vShift = focusOffsetY * -1;
...
image.css('left', hShift + 'px');
image.css('top', vShift + 'px');

With

...
hShift = focusOffsetX * -100 / scaledImageWidth;
...
vShift = focusOffsetY * -100 / scaledImageHeight;
...
image.css('left', hShift + '%');
image.css('top', vShift + '%');

Or for the best performance, according to tweenlight: a combo of translate and translate3d

image.css('transform', 'translate(' + hShift + '%, ' + vShift + '%) translate3d(0, 0, 0)');

Using % intead of px will avoid to have to adjust the focus during a scaled resizing of the container such as perspective change.

[jonom]

@g-van-vreckem good point, thanks - plugin now uses % in latest version. Will look at using transform as an option but did you test that code? I dropped it in and wasn't quite working so will need to look further at it. Feel free to test against the latest version and get back to me or submit a PR if you have time.

[g-van-vreckem]

I made too much others changes removing jQuery and using animations to be sure, but the % must be calculated differently for transform and left/top. The * -100 / scaledImageHeight above was only good for transform use not left / top. Also, transform still need prefix for some plateforms so i use:

transform = Modernizr.prefixed( 'transform' ),
...
    self.image.style[ transform ] = 'translate(' + hShift + '%,' + vShift + '%) translate3d(0,0,0)';

I've made a pull-request so you can look at a working solution based on your new code.

[1devca]

+1

[jonom]

Proof of concept: https://github.com/jonom/jquery-focuspoint/pull/26

[g-van-vreckem]

see #28 Note: to use the patch supply the proper prefixed name for transform as a parameter. I'll add a demo with the code for that

[g-van-vreckem]

It looks like jQuery is already doing the proper prefixing when using this syntax .css('transform', '...'); that simplify things a bit.

[jonom]

I've explored switching to translate in v2 but the disadvantage that brings is that you can't then apply additional transforms (such as scale) to an image easily. So I'm putting this on the shelf for now, but thanks for the input!