jquery - ページのスクロール時にテキストをフェードする

Question

この基本的な例が機能しています：

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

とにかく、フェードテキストを少しスクロールして、より滑らかなトランジトンを作成することはできますか?

このサイトのように:

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

どうもありがとう

score 3 · Accepted Answer

不透明度と同じように、テキストの余白を操作するだけです。

例：

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

score 3 · Accepted Answer

これを使う

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

score 0 · Accepted Answer

これは、すでに説明したいくつかのアイデアを組み合わせたものです。

$(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