【コピペOK】スクロールに応じた要素のアニメーションを超簡単実装
WEBサイトのページスクロールに応じて、画像が下からフワッと現れたり、右からスルーっと登場したりすると、なんだかリッチで洗練された感じがしますよね。
今回は、スクロールに応じて要素をアニメーションさせる、もっとも簡単な方法（たぶん）を解説させていただきます。
コピペで簡単に実装できますよ。
使用するライブラリは「Animate.css」と「WOW.js」になります。
１．<head>内に下記コード記述
WordPressのheader.phpの<head>内に、下記コードを記述して読み込みます。
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
２．</body>の上に下記コード記述
WordPressのfooter.php内、</body>の上に下記コードをコピペします。
<script>
new WOW().init();
</script>
３．動かしたい要素にclassとdata-wow-delayを指定
スクロールに応じてアニメーションさせたい要素に下記コードを追記します。
class="wow fadeInDown" data-wow-delay="0.5s" /*上からフェードイン*/
class="wow fadeInLeft" data-wow-delay="0.5s" /*左からフェードイン*/
class="wow fadeInRight" data-wow-delay="0.5s" /*右からフェードイン*/
class="wow fadeInUp" data-wow-delay="0.5s" /*下からフェードイン*/
class="wow backInUp" data-wow-delay="0.5s" /*下からフェードインしてアップ*/動作のスピードはdata-wow-delayの値で好みに調整してください。
その他のアニメーションは、https://daneden.github.io/animate.css/で確認してみてくださいね。
以上になります。
