テキストボックスにアニメーション効果を与える方法は？

Question

私はページの下部に配置された検索バーを持っています。検索バーをスクロールするとすぐに、その検索バーがフェードインまたはフェードアウトエフェクトを介して表示されるように最初に非表示にします。

これは、検索バーのための私のHTMLコードです： -

<div class=""> 
    <div class="container-4 col-lg-12 col-md-12 col-xs-12"> 
     <div> 
      <div class="col-lg-4 col-md-4 col-xs-4"></div> 
    <input class="col-lg-4 col-md-4 col-xs-4 form-control searchbar" type="text" id="search" placeholder="Discover more about any career you like" />  
    <button (click)="test()" class="icon"><i class="fa fa-search"></i></button> 
     <div class="col-lg-4 col-md-4 col-xs-4"></div> 
     </div>  
    </div> 
</div> 

Answer 1

ライブラリウェイポイント、まさにそれを行います。ここでは基本的な例を見ることができます：getting started with waypoints。あなたが望む方向にあなたの検索バーに向かってスクロールされているとき、あなたはイベントを持っています。次に、fadeInなどのjQueryを使用することができます。あなたはyoullのページイベントの下部を取得以下のコードを代わりにクリック のイベントを下にスクロール使用する必要があり、このリンクhttp://codepen.io/anon/pen/gaeBbNアウト

Answer 2

チェック

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
    alert("bottom!"); 
} 
});