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