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 tr

Answer 1

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 2

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 3

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

Answer 4

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