Search code examples
jqueryhtmlcssscrollbackground-size

increase background size while scrolling

i have a problem. i'm building a parallax website and one eyecandy is while you scrolling, the background size are increasing. at first i think that wont be a problem, because i use the background-position snippets solution which is:

var x = $window.scrollTop();
$('.stage.intro').css('background-size', '10' + parseInt(x / 10, 0) + '% ');

this is works fine for a while, but when the scroll reached the 109th percent, the background looks terrible. a question. how can i handle this? demo here

Solution

  • That's because '10' + 10 is equal to '1010', not 110. You're instantly jumping from 109% to 1010% - a much larger value. All you need to do is change that '10' to be a numerical 100:

    $('div').css('background-size', 100 + parseInt(x / 10, 0) + '% ');

    JSFiddle demo.