Geek asks and answers

Parallax - getting text to scroll at 1/10 speed

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

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);
+5
source share
1 answer

I have also never used a plugin. it is quite simple to do without a plugin.

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

using the top of the scroll will give you scroll by distance, and then you can add this to fields, top positions, left positions, bg positions, etc. hope this helps

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

+14
source

More articles:


All Articles