web-dev-qa-db-ja.com

jqueryはページスクロールでdivをフェードアウトします

ページが下にスクロールするときにdivをフェードアウトしようとしています（ページスクロールを使用して-フェードアウト効果だけではありません）。ここにあるこのコードを使用して、ページが下にスクロールするときにdivの不透明度を調整しています。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
        $('.logo_container').css({'opacity':( 100-scroll )/100});
});

ここでの私の問題は、フェードアウトが速すぎることです。ユーザーがスクロールすると、はるかに微妙なフェードが必要になります。より遅く、より微妙なフェードアウトを作成するためのより良いロジックを誰かが考えることができますか？.

これが [〜＃〜] jsfiddle [〜＃〜] コードの動作を示しています

jquerycssopacityscrolltop
6
Sam Skirrow

これは、これでうまく機能します [〜＃〜] fiddle [〜＃〜] 非常に単純なロジックです。このjqueryを使用して機能させました。

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var height = $(window).height();

    $('.logo_container, .slogan').css({
        'opacity': ((height - scrollTop) / height)
    }); 
});

（height --scrollTop）/ heightは、線形形式1から0までの値セットを提供します。

例：

height = 430pxおよびscrollTop = 233px。

（高さ-scrollTop）/高さは不透明度0.45を与えます。

17
Kunjan Thadani

ソリューションA

jQueryアニメーション

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    $('.logo_container, .slogan').stop().animate(
        {opacity: (( 180-scroll )/100)+0.1},
        "slow"
    );
});

ソリューションB

CSS移行

.wrapper {
    height:1000px
}
.logo_container {
    background:red;
    width:250px;
    height:500px;
    position:relative;
    margin:0px auto;
    transition: opacity 1s ease;
}
2
Tymek

その部分を変更することでソリューションを改善しました( 1000-scroll )/1000

[〜＃〜] jsfiddle [〜＃〜]

それが役に立てば幸い

0
Nima Derakhshanjan