WordPressで使う場合の設定
各ファイルのダウンロード
animate.css
https://daneden.github.io/animate.css/
wow.js
https://github.com/matthieua/WOW
読み込む方法
・ファイルはテーマの真下に置く
・head内に以下のコード
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/animate.css"> <script src="<?php echo get_template_directory_uri(); ?>/wow.js"></script>
・footer下などに以下のコード
<script> new WOW().init(); </script><!-- wowの読み込み -->
記述方法
https://daneden.github.io/animate.css/で適用したいアニメーションを選び、以下のように記述
<h1 class="wow fadeIn" data-wow-duration="2s"><?php bloginfo(' name '); ?></h1> <p class="wow fadeIn" data-wow-duration="2s" data-wow-delay="2s"><?php bloginfo( 'description' ); ?></p>
一つ目は可視領域に入ってからフェードインのエフェクトを2秒かけて表示させる。
二つ目は可視領域に入ってからフェードインのエフェクトを2秒後に2秒かけて表示させる。