Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Improve performance of jQuery drag animation

Improve performance of jQuery drag animation

Problem

I recently started a new project, which is a CSS3/jQuery flipbook (click to flip, or click & drag the right page).

See it live here or play with the fiddle

THE QUESTION:

How can I improve the speed when dragging the page?

It seems OK in Chrome and Safari, but it's slower/'steppy' in Firefox and really awful in Opera (tested in latest versions on a Mac OS X Snow Leopard)

BTW.. I'm still cleaning up the code / I tried removing the rotation but it does not seem to change anything.

I had a few testers that complained about performance on Chrome/mac too (it seems "OK" for me)..

Any help/criticism/hint is appreciated.

Here's the code that moves the page (see the fiddle for the entire code)

function startMove() {
    $('#flipwrap.movable').on('mousemove', function(e) {
        e.preventDefault();
        thisX = parseFloat((e.pageX - offsetX - 190), 10);
        thisY = parseFloat((e.pageY - offsetY - 270), 10);
        positionX = parseFloat((((thisX - 55) * -1) + 310), 10);
        positionY = parseFloat(((thisY + 100) / 10), 10);
        rotateZ = parseFloat((((positionX - 350) * positionY) / 900).toFixed(2) * -1, 10);

        if ($('.page.flipit').hasClass('movable')) {
            $('.page.flipit').stop(true, true);
            $('.page.removeit').stop(true, true);
            $('.page.flipit').removeClass('css-animation').css({
                width: 116 - thisX / 2.1,
                height: 345 - thisX / 8,
                top: -13 + thisX / 16,
                left: thisX + 155
            });
            $('.page.flipit').css('-webkit-transform', 'rotate(' + rotateZ + 'deg)  ').css('-o-transform', 'rotate(' + rotateZ + 'deg)  ').css('-moz-transform', 'rotate(' + rotateZ + 'deg)  ');
            console.log('    pX = ' + positionX + ' pY = ' + positionY + ' rZ = ' + rotateZ + ' tX = ' + thisX + ' tY = ' + thisY);
            $('.page.removeit').css({
                width: 40 + thisX / 1.6
            });
        }
    });
}
Problem courtesy of: pixelass

Solution

Mousemove is called dozens/hunderds of times each time you move your mouse, cache your selectors, i.e.

$('#flipwrap.movable').on('mousemove', function(e) {}
  var pageFlipIt = $('.page.flipit');
  $('#flipwrap.movable').on('mousemove', function(e) {
     pageFlipIt.doStuff();
  })
})

But the biggest problem is that animating box-shadows and border-radii is quite processor intensive. I tried removing all of them in your jsfiddle and it was smooth as butter in Opera, but of course it will take away all the charm of your book implementation.

I'd suggest removing all of them and then add them progressively to see where you can find the tradeoff between eye-candy and speed.

Solution courtesy of: Duopixel

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Improve performance of jQuery drag animation

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×