Friday, 16 August 2013

jQuery Text Opacity with Horizontal Scroll

jQuery Text Opacity with Horizontal Scroll

I can't quite figure out why this isn't working. I have some text
introducing images to the right of it. As the user scrolls to view the
images I want the text to gradually fade away. I've seen plenty of
examples of vertical text fading with the same code but for some reason
this isn't working for me. Anybody see anything I'm doing wrong? I have
the following javascript code:
<script>
$(document).bind("projectLoadComplete", function(){
if ($(".project_intro")[0]){
var divs = $('.project_intro');
$(window).bind('scroll', function () {
var st = $(this).scrollLeft();
divs.css({ 'opacity' : (1 - st/250) });
if (divs.css('opacity') < 0) {
divs.css('opacity', 0);
}
});
}
});
</script>
And the following HTML code:
<div class="project_intro">
This is some intro text that I want to fade when the user scrolls left.
</div>
<table height="100%" style="height: 100%; margin-left: 300px;"
valign="middle">
<tr><td>{image 1}</td><td>{image 2}</td></tr></table>

No comments:

Post a Comment