Create Beautiful Fullscreen Scrolling Websites

そう謳っている通り、フルスクリーンで、美しいスクロールアニメーションを簡単に作れてしまう、
手軽で柔軟なライブラリー「fullPage.js」を一度は使ったことがあると思います。
もし使ったことがない方は是非一度使ってみましょう！

fullPage.js だけでは満足できない･･･

その「fullPage.js」だけでもオプションを触ると色々とできるのですが、残念なのはスクロールアニメーションが不足していること･･･
そこで、スクロールアニメーションとして有名な「wow.js + animate.css」を同時に使ってみようと思います。
※wow.js は、アニメーションのトリガーや、アニメーションの詳細な動作を設定できるJavaScirptです。
※animate.css は、HTML要素のclassにアニメーションを指定するだけで、簡単にアニメーションを実装することができるスタイルシートです。

準備をしよう

まずそれぞれの必要なファイルをダウンロードします。
ついでに動作サンプルは各公式サイトにありますので、そちらもチェックしておくとイメージしやすいかと思います！

fullPage.js　公式　Git
上記から、jquery.fullPage.jsとjquery.fullPage.cssファイルをダウンロードしてください。
（jquery.fullPage.min.jsでも良いです）
（必要に応じて、vendorsフォルダ内のJSファイルをも使用します）

wow.js　公式　Git
上記から、wow.jsファイルをダウンロードしてください。
（wow.min.jsでも良いです）

animate.css　公式　Git
上記から、animate.cssファイルをダウンロードしてください。
（animate.min.cssでも良いです）

使い方

ファイルの読み込み

必要なファイルのダウンロードができたら、次にファイルを読み込みます。
jQueryを使うことが前提のライブラリーが含まれていますので、jQueryの読み込みも忘れずに！

head部分でCSSファイルを読み込ませます。

<link rel="stylesheet" href="./css/jquery.fullPage.css">
<link rel="stylesheet" href="./css/animate.css">

直上にJSファイルを読み込ませます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src=./js/vendors/jquery.easings.min.js"></script>
<script src=./js/vendors/jquery.slimscroll.min.js"></script>

<script src=./js/jquery.fullPage.min.js"></script>
<script src="./js/wow.js"></script>

※相対パスはご自分の環境に合わせてください。

HTMLを記述（例）

ドキュメントに沿って必要なコードを記述していきます。
HTML部分はシンプルに記述。

<div id="fullpage">
	<section class="section">Simple Section.</section>
	<section class="section">Simple Section.</section>
	<section class="section">Simple Section.</section>
	<section class="section">Simple Section.</section>
</div>

初期化

そして実行初期設定のスクリプトを記述します。

$(function(){
	$('#fullpage').fullpage();
});

このように記述することで、公式のサンプルのようにfullPage.jsが動作し、完了となるのですが･･･

今回の本題はここからです！

wow.jsとanimate.cssの初期化を行いたいと思います。
まずは先ほど記載したHTML部分をこのように変更します。

<div id="fullpage">
	<section class="section">Simple Section.</section>
	<section class="section">Simple Section.</section>
	<section class="section">Simple Section.</section>
	<section class="section">
		<p class="wow slideInUp" data-wow-duration="2s">Simple Section.</p>
	</section>
</div>

4つ目のセクション内に段落（p）を追加し、
その段落（p）に対して、スクロールが要素に達してから2秒かけてアニメーション（下から上へスライドして表示）を実行するようにしています。

次にスクリプトには、wow.jsを初期化設定のスクリプトを追加します。

$(function(){
	$('#fullpage').fullpage();

	new WOW().init();
});

これで動くはず･･･と思いますが、実は全然動きません。

fullPage.jsでフルスクリーン化し、
wow.jsでアニメーション時間とトリガーを設置、
animate.cssでアニメーションを指定と、完璧のように思えますが、実は大きな穴があります。

fullPage.jsは、フルスクリーン化をするのと同時に、スクロールの方向や時間、動作（easing）、スクロールバーの挙動まで制御する多機能ライブラリーです。
その多機能だからこそ、wow.jsのトリガー部分と実行タイミングが衝突してしまっているのです。

そこで、スクリプトをこのように変えてみましょう！

$(function(){
	$('#fullpage').fullpage({
		scrollBar: true,
		afterRender: function(){
			new WOW().init();
		}
	});
});

fullPage.jsのオプションから、
scrollBarパラメータは、スクロールバーの表示/非表示の設定で、
afterRenderパラメータは、数あるコールバックの1つで、ページ読み込み後のコールバックになります。

2つのライブラリーが上手く動作しました！

またこの設定で「スクロールバー」が表示されてしまうのが嫌な方は、CSSに以下を加えるとスクロールバーが表示されません。

body{overflow:hidden !important;}

最後に

「Animata.cssとwow.js」や「fullPage.js」だけなら、使ったことも多いライブラリーと思いますが、
これらを組み合わせると予想していないところで躓いてしまうことは良くあります。
それぞれのライブラリーの機能を理解することも大切ですが、
JavaScriptやjQueryを理解することで、解決することは簡単にできます。

他にも優秀で面白いライブラリーは数多くあります。
JavaScriptやjQueryを理解していなくても使うことができるので非常に便利ですが、
上手く使いたいなら、一歩踏み込んで、JavaScriptやjQueryを勉強してみてはいかがでしょうか？

深く理解しなくても、使える程度に、応用できる程度に、と勉強することもできますので、
是非、一度お問い合わせください！