CODEWITHSUNDEEP
javascriptjqueryparallax
CarbonDry
CarbonDry

Reputation: 850

Anyway to optimise this parallax script for better performance?

I have a parallax script that I am using to slow the background position of an element relative to the window scroll. It performs GREAT on my macbook pro but on slower computers it shudders more than I feel it needs to.

Here is the code below:

    var bgobj = $('.paral');

    $(window).scroll(function () {

        onScroll(bgobj);

    });

function onScroll(bgobj) {

    var $window = $(window);

    var yPos = ($window.scrollTop() / bgobj.data('speed'));
    // Put together our final background position
    var coords = yPos + 'px';

    // Move the background
    bgobj.css({ backgroundPositionY: coords });

}

So my question is, what optimisations can be made to the code to improve speed on lower machines?

Thank you

Upvotes: 0

Views: 405

Answers (2)

Konstantin K
Konstantin K

Reputation: 1317

Have you considered throttling?

http://underscorejs.org/#throttle

http://underscorejs.org/#debounce

var bgobj = $('.paral');

var onScrollThrottled = _.throttle(onScroll, 100);

$(window).scroll(function () {

    onScrollThrottled(bgobj);

});

function onScroll(bgobj) {

    var $window = $(window);

     var yPos = ($window.scrollTop() / bgobj.data('speed'));
     // Put together our final background position
     var coords = yPos + 'px';

     // Move the background
     bgobj.css({ backgroundPositionY: coords });

     if (isScrolledIntoView($('#more-info'))) {

         animateCircle();

     }
}

Of course, instead of throttling/debouncing the entire onScroll function you can apply the optimisation to animateCirle or updating the background css

Upvotes: 1

Jonas Grumann
Jonas Grumann

Reputation: 10786

I see some minor improvements to be done. Nothing big:

//cache $window and speed

var $window = $(window);
var bgobj = $('.paral');
var speed = bgobj.data('speed')

$window.scroll(function () {
    onScroll(bgobj);
});

function onScroll(bgobj) {



var yPos = ($window.scrollTop() / speed);
// Put together our final background position
//var coords = yPos + 'px'; // this is not needad as jQuery defaults to pixels if nothing is specified

// Move the background
bgobj.css({ backgroundPositionY: coords });

if (isScrolledIntoView($('#more-info'))) { // depending on what is inside this function, this might slow everything doen

    animateCircle();

}

Upvotes: 0

Related Questions