JQuery Parallax / Scroll Events

This question is less relevant for parallax than for scrolling events. My main problem with my project is that the parallax scroll effect is smooth and not nervous.

My question is, are some properties quickening / scrolling better than others? For example, the background position works better than when setting margin-top on the scroll.

+5
source share
1 answer

I'm not sure that some properties create less overhead during animation than others, but I would be very interested if someone posted some good information on this. However, I know a couple of things that can help in performance.

position : absolute , , , . position : relative , .

, scroll - 30 :

var scroll_ok = true;
setInterval(function () {
    scroll_ok = true;
}, 33);//33ms is 30fps, you can try changing this to something larger for better performance
$(window).bind('scroll', function () {
    if (scroll_ok === true) {
        scroll_ok = false;
        //now run your code to animate with respect to scroll
    }
});

UPDATE:: 2014-08-26

, . :

  • GPU , (opacity transform ). , top/left ( , transform).

  • will-change - , . , , .

  • requestAnimationFrame polyfill . , "", .

+11

All Articles