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ファイルを読み込ませます。
[html title=”index.html”]
<link rel=”stylesheet” href=”./css/jquery.fullPage.css”>
<link rel=”stylesheet” href=”./css/animate.css”>
