画面を下にスクロールして文字をfadeInさせたい

###実現したいこと
指定の場所にスクロールすると文字がfadeInするアニメーションを実装したいです。
###条件
場所はカルーセルの最初の画面のところです。
2枚目以降の画面では左右のインディケータをクリックすると文字がfadeInします。（←こちらのサイトで解答者様から教えていただいて実現できました。感謝）
カルーセルはbootstrap3で実装しております。

作成しているサイトはレスポンシブデザインですので、スマホやタブレット、デスクトップの画面幅の時はスクロールする距離が若干変わってしまいます。

スマホ：ページトップから約3分の1下にスクロールした場所にあります。（画面横幅が767px以下の時）
タブレット：同上（画面幅が768px以上の時）
デスクトップ：ページトップから約4分の1下にスクロールした場所にあります。（画面横幅が992px以上の時）
###現状
1枚目：文章が表示されています。
2～4枚目：左右のインディケータをクリックすると、文章がfadeInされます。

html

<section class="carousel-size">
        <div id="carousel-example-generic" class="carousel slide">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/slide1.jpg" alt="slide1" width="100%">
                    <div class="carousel-caption">
                        文章
                    </div>
                </div>
                <div class="item">
                    <img src="images/slide2.jpg" alt="slide2" width="100%">
                    <div class="carousel-caption">
                        文章
                    </div>
                </div>
                <div class="item">
                    <img src="images/slide3.jpg" alt="slide3" width="100%">
                    <div class="carousel-caption">
                        文章
                    </div>
                </div>
                <div class="item">
                    <img src="images/slide4.jpg" alt="slide4" width="100%">
                    <div class="carousel-caption">
                        文章
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </section>

    $(function() {
        $(".carousel-caption").fadeIn();
        $("#carousel-example-generic").on("slide.bs.carousel",function() {
          $(".carousel-caption").fadeOut("fast");
        });
        $("#carousel-example-generic").on("slid.bs.carousel",function() {
          $(".carousel-caption").fadeIn(5000);
        });
    });

###試したこと
waypoints.jsとAnimate.cssを使用してチャレンジしました。
・</body>直前に<script src="jquery.waypoints.min.js"></script>を挿入
・headタグ内に<link rel="stylesheet" href="css/animate.css">を挿入
・「 class="animated fadeIn"」を追加
・jsファイルに以下のコードを記述

html

<section class="carousel-size">
    <div id="carousel-example-generic" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/slide1.jpg" alt="slide1" width="100%">
                <div class="carousel-caption" class="animated fadeIn">
                    文章
                </div>

              ...(2枚目以降は割愛)

　　　　　　　</div>
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</section>

$(document).ready(function() {

  $(".animated").waypoint({
    handler: function(direction) {

      if (direction === "down") { 

        $(this.element).addClass("fadeIn");

        this.destroy();
      }
    },
    offset: "30%"
  });
});

上記で試したところ、特に何も変化しませんでした。
コーディングが間違っていると思うのですが、分かる方いらっしゃいましたら、アドバイスいただけますでしょうか。

以上、ご確認よろしくお願いいたします。