Fade text when page scrolls

问题

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

回答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");
   }
});

回答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
        }); 
    });
});

回答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

回答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

来源：https://stackoverflow.com/questions/14671993/fade-text-when-page-scrolls

标签

jquery

fadeout