Fade text when page scrolls

Question

I have this basic example working:

http://www.mharrisweb.co.uk/tester.htm

Is there anyway I can get the fading text to scroll slightly, to create a more fluid tranisiton?

Like this site:

http://themetrust.com/demos/hero/

Many thanks

Answer 1

use this

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop()<10){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});

Answer 2

Just manipulate the margins of the text like you did the opacity.

Example:

jQuery(function($) {
    var divs = $('.fade');
    $(window).on('scroll', function() {
        var st = $(this).scrollTop();
        divs.css({ 
            'margin-top' : -(st/3)+"px", 
            'opacity' : 1 - st/35
        }); 
    });
});

Answer 3

Use this:

http://api.jquery.com/animate/

It allows you to smoothly move the element to a given coordinates, which you can determine using:

http://api.jquery.com/scrollTop/

Also you will need this:

http://api.jquery.com/fadeTo/

It allows you to fade to a particular transparency, instead of all the way to fully transparent. You will need this if you want it to look like the "themetrust.com" example you gave, if you notice if you only scroll a little, it only fades a little

Answer 4

Here is something that combines a few of the ideas already discussed.

$(window).scroll(function(){
    var top = ($(window).scrollTop() > 0) ? $(window).scrollTop() : 1;
    $('.fade').stop(true, true).fadeTo(0, 1 / top);
    $('.fade').css('top', top * 1.3);             
});

jsfiddle