web-dev-qa-db-ja.com

スクロールダウンでフェードイン、スクロールアップでフェードアウト-ウィンドウ内の要素の位置に基づいて

ウィンドウ内に完全に表示されるときに、スクロールダウン時に一連の要素をフェードインさせようとしています。下にスクロールし続けると、それらをフェードアウトさせたくありませんが、上にスクロールすると、フェードアウトさせます。

これは私が見つけた最も近いjsfiddleです。 http://jsfiddle.net/tcloninger/e5qaD/

$(document).ready(function() {

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.hideme').each( function(i){

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},500);

        }    
    }); 
}); 
});

スクロールダウンしたいことは正確に行いますが、スクロールアップして要素をフェードアウトさせることもできます。

私はこれを運良く試しました。

            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},500);  

            } else {

               $(this).animate({'opacity':'0'},500); }

これを見てくれてありがとう。

javascriptjqueryscrollfade
13
minimographite

コードを少し調整し、より堅牢にしました。プログレッシブエンハンスメントに関しては、JavaScriptですべてのフェードインアウトロジックを使用する方が良いでしょう。 myfunksydeの例では、opacity: 0;のためにJavaScriptを持たないユーザーは何も表示されません。

    $(window).on("load",function() {
    function fade() {
        var animation_height = $(window).innerHeight() * 0.25;
        var ratio = Math.round( (1 / animation_height) * 10000 ) / 10000;

        $('.fade').each(function() {

            var objectTop = $(this).offset().top;
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();

            if ( objectTop < windowBottom ) {
                if ( objectTop < windowBottom - animation_height ) {
                    $(this).html( 'fully visible' );
                    $(this).css( {
                        transition: 'opacity 0.1s linear',
                        opacity: 1
                    } );

                } else {
                    $(this).html( 'fading in/out' );
                    $(this).css( {
                        transition: 'opacity 0.25s linear',
                        opacity: (windowBottom - objectTop) * ratio
                    } );
                }
            } else {
                $(this).html( 'not visible' );
                $(this).css( 'opacity', 0 );
            }
        });
    }
    $('.fade').css( 'opacity', 0 );
    fade();
    $(window).scroll(function() {fade();});
});

こちらをご覧ください： http://jsfiddle.net/78xjLnu1/16/

乾杯、マーティン

4
hobbeshunter

私はそれが遅いことを知っていますが、私は元のコードを取り、CSSを簡単に制御するためにいくつかを変更します。そこで、addClass（）とremoveClass（）を使用してコードを作成しました

ここに完全なコード： http://jsfiddle.net/e5qaD/4837/

        if( bottom_of_window > bottom_of_object ){
            $(this).addClass('showme');
       }
        if( bottom_of_window < bottom_of_object ){
            $(this).removeClass('showme');
3
Michael Deleau

申し訳ありませんが、これは古いスレッドですが、一部の人々はまだこれを必要とするでしょう、

注：フェードをアニメーション化するためにAnimate.cssライブラリを使用してこれを達成しました。

私はあなたのコードを使用し、.hiddenクラスを追加しました（ブートストラップの隠しクラスを使用）が、.hidden { opacity: 0; }

$(document).ready(function() {

/* Every time the window is scrolled ... */

$(window).scroll( function(){

/* Check the location of each desired element */
$('.hideme').each( function(i){

    var bottom_of_object = $(this).position().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();


    /* If the object is completely visible in the window, fade it it */
    if( bottom_of_window > bottom_of_object ){

        $(this).removeClass('hidden');
        $(this).addClass('animated fadeInUp');
    }    else {
            $(this).addClass('hidden');
               }

}); 
}); 
});

別の注：これをコンテナに適用すると、不具合が生じる可能性があります。

0
Valumin