animate.cssとwow.jsがうまく動かない

fullpage.jsを使って、パララックスのサイトを作っています。
スクロールして要素に達した時、テキストや画像をアニメーションで表示できるようにするため、animate.cssとwow.jsを使っているんですが、1ページ目のアニメーションしか実行されません。
参考サイトがたくさんあり、それを見てやっているんですが、上手くいきません。
教えていただけないでしょうか？

3ページ目の<div class="sec2_txt01">が動きません。

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<title></title>
	<meta name="description" content="" />
	<meta name="keywords"  content="" />

	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/animate.css" />
	<link rel="stylesheet" href="css/jquery.fullPage.css" />
<!--	<link rel="stylesheet" href="css/examples.css" />-->
	<style>

	/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 5em;
		font-family: arial,helvetica;
		color: #fff;
		margin:0;
	}

	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}

	/* Overwriting styles for control arrows for slides
	* --------------------------------------- */
	.controlArrow.prev {
		left: 50px;
	}
	.controlArrow.next{
		right: 50px;
	}


	/* Bottom menu
	* --------------------------------------- */
	#infoMenu li a {
		color: #fff;
	}
	</style>

	<!--[if IE]>
		<script type="text/javascript">
			 var console = { log: function() {} };
		</script>
	<![endif]-->

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

	<script src="js/jquery.slimscroll.min.js"></script>

	<script src="js/jquery.fullPage.js"></script>
<!--	<script type="text/javascript" src="js/examples.js"></script>-->
<script src="js/wow.js"></script>
<script>
	new WOW().init();
</script>
	<script>
		$(document).ready(function() {
			$('#fullpage').fullpage({
				//anchors: ['1stPage', '2ndPage', '3rdPage', '4thPage', '5thPage'],
				//sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
				navigation: true,
				navigationPosition: 'right',
				navigationTooltips: ['First page', 'Second page', 'Third page', 'Fourth page', 'Fifth page']
			});
		});
	</script>

</head>
<body>

<div id="fullpage">
	<div class="section " id="section0">
		<div class="intro">
        	<div class="con_r">
                <div class="sec0_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="3.5s"><img src="img/txt01.png" width="398" height="43"></div>
                <div class="sec0_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="4s"><img src="img/txt02.png" width="412" height="236"></div>
                <div class="sec0_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="4.5s"><img src="img/txt03.png" width="221" height="24"></div>
            </div>
		</div>
	</div>
	<div class="section" id="section1">
		<div class="intro">
			<div class="sec1_pic01"><img src="img/campaign.png" width="870" height="160"></div>
            <table>
            	<tr>
                	<td>施術メニュー</td>
                	<td>料金(税込)</td>
                	<td>時間</td>
                	<td>備考</td>
                </tr>
            	<tr>
                	<td>マッサージ</td>
                	<td>\800</td>
                	<td>10分</td>
                	<td>10分延長ごとに＋\800</td>
                </tr>
            	<tr>
                	<td>IDストレッチ</td>
                	<td>\1,200</td>
                	<td>15分</td>
                	<td>15分延長ごとに＋\1,200</td>
                </tr>
            	<tr>
                	<td>骨盤矯正</td>
                	<td>\3,000</td>
                	<td>20分</td>
                	<td>お得な5回パックで\12,000</td>
                </tr>
            </table>
	  </div>
	</div>
	<div class="section" id="section2">
		<div class="intro">
			<div class="sec2_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="1s">
            	<img src="img/section02_txt01.png" width="550" height="73">
				<p>私たちは、女性のキレイを支えるパートナーとして無理なく「あなたに合った方法」で、ボディメイクを一緒に行っていきます。</p>
          </div>
		</div>
	</div>
	<div class="section" id="section3">
		<div class="intro">
			<h1><img src="img/section03_txt01.png" width="550" height="73"></h1>
			<p>私たちは、あなたのキレイのために、トレーニングの合間に休憩していただくスペースは快適にくつろいでいただけるよう拘っています。</p>
		</div>
	</div>
	<div class="section" id="section4">
		<div class="intro">
			<h1>Enjoy it</h1>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
			<p>An easy and beautiful way to navigate throw the sections</p>
		</div>
	</div>
</div>


</body>
</html>

追加したcss

@charset "utf-8";
/* CSS Document */

#section0 {
    width:100%;
    height:100%;
    background-image:url(../img/top.gif);
    background-position: 50% 50%;
    background-size: cover; /* 背景画像をフルスクリーン表示 */
}

.con_r {
	margin: 0 0 0 50%;
}

.sec0_txt01 {
	margin: 0 0 20px 0;
}

#section2 {
    width:100%;
    height:100%;
    background-image:url(../img/section02_bg.png);
    background-position: 50% 50%;
    background-size: cover; /* 背景画像をフルスクリーン表示 */
}

.sec2_txt01 {
	width: 40%;
	margin: 150px 0 0 0;
}

.sec2_txt01 p {
	color: #666;
}

行動規範の内容に同意します

回答2件

ベストアンサー

FAQにのってますが試されました？

Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.

fullPageのオプションに

scrollBar: true

か、

autoScrolling: false

を設定する、と書いてあります。

投稿2016/03/02 09:02

liply

総合スコア150

ic_egawa

2016/03/03 00:55

試してみたら、上手くいきました！ありがとうございます。

行動規範の内容に同意します

idの section2 が2ページ目という解釈でいいですか？

sec2_txt01 というクラスと同列に wow クラスを忘れているからでは無いでしょうか。

投稿2016/03/02 02:02

lazyeyed

総合スコア48

ic_egawa

2016/03/02 02:11

回答、ありがとうございます。 section2が3ページ目です。 wowクラスを入れましたが、動きません・・・。

lazyeyed

2016/03/02 02:28

1ページ目のdivにwowクラスが適用されているので、1ページ目が動くのは理解できます。 wowクラスがイベントトリガーとなっているようですので、wowクラスが書かれていない要素は当然動きません。まず、何の要素が何ページ目で動かないのか明確に記載ください。その上で、動かないとおっしゃるソースを再度記載してみてください。

ic_egawa

2016/03/02 03:02

内容を修正しました。よろしくお願い致します。

lazyeyed

2016/03/02 04:29

私の書き方が悪かった模様です。『動かないと思われる箇所』のソースではなく、動かないページのソース全体を見せて頂かないといけません。何故なら、ご本人が問題であると認識されている箇所以外に原因がある可能性があるからです。 <!DOCTYPE> <HTML> <HEAD> <META charset=UTF-8"> <TITLE></TITLE> <link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css"> <script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script> <script> new WOW().init(); </script> <style> #section2 { width:100%; height:100%; background-image:url(img/section02_bg.png); background-position: 50% 50%; background-size: cover; /* 背景画像をフルスクリーン表示 */ } .sec2_txt01 { width: 40%; margin: 0 0 0 0; } .sec2_txt01 p { color: #666; } </style> </HEAD> <BODY> <div class="section" id="section2"> <div class="intro"> <div class="sec2_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="1s"> <img src="img/section02_txt01.png" width="550" height="73"> <p>私たちは、女性のキレイを支えるパートナーとして無理なく「あなたに合った方法」で、ボディメイクを一緒に行っていきます。</p> </div> </div> </div> </BODY> </HTML> ちなみに最小構成で該当箇所を構成したら動きましたので、該当箇所以外に問題があるように見受けます。

ic_egawa

2016/03/02 04:36

すみません。ソース全体を載せました。これ以外のcssやjsは公式サイトからダウンロードしたままの状態です。

lazyeyed

2016/03/02 05:14

確認いたしました。 ※ソース内にクライアント様名らしきものが乗ってますので、公開する際はNDA情報に気をつけて掲載ください。結論から言いますと、wow.jsとfullpage.jsは同時には使えません。海外の方で同様にスタックしている方の解答も見つけましたので参考に。 http://stackoverflow.com/questions/30736025/use-of-wow-min-js-with-jquery-fullpage-js ローカル環境でも現象確認し、状況から原因を特定しましたが、 wow.jsで、要素が表示されるまでの判定キーとして、スクロールに関するエレメントから取得を試みているようで、fullpage.jsがそのスクロール値の取得をwow.jsにとって阻害する形となっています。 jsモジュールを弄るのはかなりの手間がかかるので、代替となるjsを見つけていただくことをお勧めします。

ic_egawa

2016/03/03 00:53

そうなんですね。ありがとうございます。探してみます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

施術メニュー	料金(税込)	時間	備考
マッサージ	\\800	10分	10分延長ごとに＋\\800
IDストレッチ	\\1,200	15分	15分延長ごとに＋\\1,200
骨盤矯正	\\3,000	20分	お得な5回パックで\\12,000

Enjoy it

関連した質問