【HTML/CSS】 簡単にアニメーション効果を与えるAnimate.cssとwow.jsの使い方

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>

一つ目は可視領域に入ってからフェードインのエフェクトを２秒かけて表示させる。
二つ目は可視領域に入ってからフェードインのエフェクトを２秒後に２秒かけて表示させる。