CODEWITHSUNDEEP
javascriptjqueryhtmlcssparallax
Jon
Jon

Reputation: 8531

Parallax - Getting text to scroll at 1/10th speed

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);

Upvotes: 5

Views: 3912

Answers (1)

william
william

Reputation: 186

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/

Upvotes: 14

Related Questions