jsのスクロールでCSSアニメーションが動作しない

Question

ユーザーがスクロールダウンするたびに、ランディングページでアニメーションを作成しようとしました。

私はこのプロジェクトでWOW.jsとAnimate.cssを使用します。私は多くの参考文献を探しましたが、何も働いていません。私は私のコードに障害があると思いますので、この私のコード：

<div class="row"> 
    <div class="col-sm-12"> 
     <h4 class="title-colcenter animation-test" data-wow-delay="1s" id="fiturtitle">FITUR</h4> 
    </div> 
</div> 

は、これは私がstyle.js

最後に

$(document).ready(function(){ 

    $("#fiturtitle").hide(); 

    $(function(){ 
     $(window).scroll(function(){ 
      $(".animation-test").each(function(){ 
       var imagePos = $(this).offset().top; 
       var imageHeight = $(this).height(); 
       var topOfWindow = $(window).scrollTop(); 

       if(imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow){ 
        $('#fiturtitle').addClass("bounce"); 
       } 
       else{ 
        $('#fiturtitle').removeClass("bounce"); 
       } 
      }); 
     }); }); 
    }); 

JSFiddle

Answer 1

に何をすべきかです：私はにいくつかの変更を加えましたそれを動作させるには、まだ別の何かをしたいと思っています： fiddle

if(imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow){ 

     $('#fiturtitle').removeClass("bounce"); 
    }else{ 
     $('#fiturtitle').addClass("bounce"); 
     $("#fiturtitle").show(); //this makes the title appear 
    } 

そして

<h4 class="title-colcenter animation-test wow" id="fiturtitle" data-wow-delay="0.1s"> 

追加wowクラスとwowクラスは、アニメーションbounceのために必要とされているようですdata-wow-delay="0.1s"

に変更。

UPDATE：アニメーションをリセットして再び上下に移動するときにコードを変更しました。

New version fiddle

CSS：

.fitur-wrap { 
     margin-top: 100px; 
    } 
    .content-fitur{ 
     position:relative; 
     z-index: 2; 
    height: 900px; 
     background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(247,247,247,0) 37%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ 
     background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(247,247,247,0) 37%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ 
     background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(247,247,247,0) 37%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#00000000',GradientType=0); /* IE6-9 */ 
    } 

    .content-fitur .image-center{ 
     text-align: center; 
     margin:0 auto 40px auto; 
    } 

    .toanim { 
     position: fixed; 
     background-color: white; 
     top: 0; 
     left: 0; 
     height: 80px; 
     width: 100%; 
     display: none; 
     z-index: 9999; 
    } 
    .title-colcenter{ 
    text-align: center; 
    font-weight: bold; 
    color: #e45b5b; 
    padding-top: 25px; 
    padding-bottom: 25px; 
    margin: 0; 
    font-size: 30px; 
    } 

.show { 
    display:block; 
} 

HTML：

<div class="toanim"> 
    <h4 class="fiturtitle title-colcenter wow" data-wow-delay="0.1s">FITUR</h4> 
</div> 

<div class="fitur-wrap content-fitur"> 
    <div class="container"> 
     <div class="row row-vertical-middle"> 
      <div class="col-xs-12 col-sm-4"> 
       <div class="image-center wow bounceInLeft" data-wow-delay="0.1s"> 
        <img src="http://placekitten.com/g/200/300" alt="Bootstrap Image Preview" class="image_container"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JS：

new WOW().init(); 
var obj = '<h4 class="fiturtitle title-colcenter animation-test wow" data-wow-delay="0.1s">FITUR</h4>'; 
    $(window).scroll(function(){ 
     console.log($(window).scrollTop()); 
      if($(window).scrollTop() == 0){ 
       $('.toanim').removeClass("show"); 
       $('.fiturtitle').removeClass("bounce"); 
       $(".toanim").append(obj); 
       $(".toanim").find(':first-child').remove(); 
      } 
      else{ 
       if(!$(".fiturtitle").hasClass("bounce")) { 
        $('.fiturtitle').addClass("bounce"); 
        $('.toanim').addClass("show"); 
        console.log("added bounce"); 
       } 
      } 
     }); 

Answer 2

チェックこの：q7Lwqqf2/2

呼び出しの推奨される方法に相当

$(document).ready(function() { 
    // Handler for .ready() called. 
}); 

に基づいて

：だから

$(function() { 
    // Handler for .ready() called. 
}) 

---

は、いくつかの変更があった。

（スクリプト）：

• あまりにも早くWOWオブジェクトに点火しないでください。準備文書待って、それはあなたの

  $(function(){ <..code..> })

（スタイル）の下でラップする必要があります。デフォルトimage-centerことで

.content-fitur .image-center{ 
: 
: 
visibility: hidden; 
} 

を非表示にする必要がありますし、それらにlibに割り当てインラインCSSをアニメーション化しましょう。ところで

---

、 私はあなたがこの行で何をしているかわからない：

if(imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow){ 

何をスクロールイベントの.animation-testをどうするつもり？