Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
like image 774
Jon Avatar asked Jun 11 '12 00:06

Jon


1 Answers

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/

like image 81
william Avatar answered Oct 25 '22 05:10

william