5

I am trying to get the text to scroll at the same speed as its parent div (which is scrolling at 1/10 speed). Currently, it is scrolling at normal speed. What am I doing incorrectly?

HTML:

<div id="blank" class="page">
  <p>blah blah blah</p>
</div>

CSS: 

body { background:url(images/background.gif); }
.page {  overflow: auto; width: 580px; color: white; }
#blank { background: url(images/02.jpg) 50% 0 no-repeat fixed; height: 2300px;}

JS:

$('#blank').parallax("50%", 0, 0.1, true);
$('#blank p').parallax("50%", 0, 0.1, true);
Neal
  • 4,468
  • 36
  • 33
Jon
  • 8,205
  • 25
  • 87
  • 146
  • 1
    I haven't used the parallax library before but I can see from inspecting the DOM in your demo that it is only affecting the `background-position` attribute of the
    and

    elements. You might need to hack the parallax library to make it work the way you want.

     – dslh Jun 11 '12 at 01:41

1 Answers1

14

i have also never used the plugin. its pretty simple to do it without a plugin.

$(document).ready(function(){     
    $(document).scroll(function(){
        var topDist = $(document).scrollTop();
        $('#blank').css('margin-top', (topDist/10)*9);      
    });
});​

using the scroll top will give you the distance scrolled and then you can add that to margins, top positions, left positions, bg positions etc. hope this helps

http://jsfiddle.net/PHHrF/1/

william
  • 186
  • 1
  • 6
  • 2
    http://jsfiddle.net/BRMcm/1/ -here i just made the divs position absolute and shifted the margins. – william Jun 11 '12 at 03:37
  • this way will shift the whole div and not just the bg-image. i feel it works best with the position:fixed. – william Jun 11 '12 at 03:46
  • As I play with the values in topDist, one small change breaks it. Id there a rule-of-thumb to follow when using that variable/options? – arttronics Jun 11 '12 at 03:59
  • 1
    the "var topDist = $(document).scrollTop();" will return the number of pixels scrolled when "topDist" is called. multiplying and dividing topDist will give you percentages of the scrolled distance. example, topDist/10 will give you a value 10% of the distance scrolled. – william Jun 11 '12 at 04:25