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

Question

まず、このウェブサイトを参照したいと思います：http://annasafroncik.it/ アニメーションが表示される方法が大好きです。 jqueryで同様の関数を作成するのは難しいですか？ このようなエフェクトを作成するプラグインはありますか？

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

Answer 1

は基本的に、あなたは、あなたが「0不透明度」にそのクラスを設定する（隠されたあなたが望むすべての要素に「hideme」クラスを追加します。 。スクロールあなたの可視ウィンドウの下端に対するすべての「hideme」要素の下の位置を確認する（）イベント

ここでの肉だ...

/* 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/

Answer 2

プラグイン？たぶん、あなたは自分でjQueryを使って想像できるアニメーションの組み合わせを作ることは間違いありません。あなたがセレクタとCSSをしっかりと把握しているなら、空は限界です！私はjQuery websiteで始まり、some examplesをチェックすることをお勧めします。

jQueryに精通していれば、ボールの回転を助け、いくつかのアイデアを提供するために、次のように試してみることができます。divのスクロールイベントを聞いて、 divにフォーカスが当たったとき（つまり、あなたが作業したdivの位置を超えてページがスクロールされている）、アニメーションを実行します。何かのように：

<div id="my_div">Some content</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     var my_div = $("#my_div"); 
     var div_top = my_div.offset().top; 

     $(document).scroll(function() { 
      if (div_top <= $(document).scrollTop()) { 
       // do some cool animations... 
      } 
     }); 

    }); 

</script> 

私は私の構文を台無しにしていないことを望む！

その後、あなたは$（ウィンドウ）を設定jQueryのを使用して;：

Answer 3

これを試してください。それは私のために

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 400) { 
    $("body").addClass("allowshow"); 
    } else { 
    $("body").removeClass("allowshow"); 
    } 
}); 

を働いていたし、このためのCSSは、このソリューションの

.showmydiv{display:block}