web-dev-qa-db-ja.com

スクロール位置にDivを表示

まず第一に、私はこのウェブサイトを参照したいと思います: http://annasafroncik.it/ アニメーションが見えるようになる方法が大好きです。 jqueryで同様の関数を作成するのは難しいですか?そのような効果を作成するプラグインはありますか?

誰かが私を助けてくれることを願っています。

27
idbranding

基本的に、非表示にするすべての要素に「hideme」クラスを追加します(そのクラスを「opacity:0」に設定します。

次に、jQueryを使用して$(window).scroll()イベントを設定し、すべての「hideme」要素の下部の位置を表示ウィンドウの下部Edgeに対してチェックします。

ここにその肉があります...

/* 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).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

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

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

        }

    }); 

});

完全なjsfiddleは次のとおりです。 http://jsfiddle.net/tcloninger/e5qaD/

59
Timothy Aaron