WaypointsとAnimate.cssでスクロールアニメーションを実装する方法

こんにちは、koheiです。

最近スクロールしていくと動的に要素が表示されるWebサイトが増えていますよね。
WordPressを使用したWebサイトでもjQueryプラグイン「Waypoint」とアニメーション用CSS「Animate.css」を使えば簡単にスクロールアニメーションが実装できます。
それでは早速実装方法をご紹介しましょう。

Waypointの読み込み

Waypointsとは、スクロールイベントが制御できるjQueryのプラグインです。
以下サイトからwaypointsをダウンロードしましょう。
Waypoints

WordPressにWaypointsを読み込むには、ダウンロードしたファイル「jquery.waypoints.min.js」をjsファルダに格納し、functions.phpに以下を記載します。
※4行目は、自分で作成したスクリプトファイルを読み込む処理です。
※6行目がWaypointsのスクリプトファイルを読み込む処理です。

// スクリプト(jQuery)読み込み
function add_script(){
   //my scriptの読み込み
  wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), '', true);
   //waypointsの読み込み
  wp_enqueue_script('waypoints', get_template_directory_uri() . '/js/jquery.waypoints.min.js', array('jquery'), '', false);
}
add_action( 'wp_enqueue_scripts', 'add_script' );

Animate.cssの読み込み

animate.cssとは、手軽にCSS3のアニメーションを実装できるスタイルシートです。
以下サイトからダウンロードしましょう。
Animate.css

Animate.cssを読み込みには、header.phpのheadタグ内に以下を記載します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/animate.css" type='text/css'>

スクロールアニメーションの実装

下準備ができましたので、早速スクロールアニメーションを実装します。
以下サイトでスクロールアニメーションを実装していますのでそれを例に解説します。
スクロールアニメーションの例

まずはアニメーションさせたい要素をCSSで非表示にします。

#profile_strength img {
  visibility: hidden;
}

次に、自分のスクリプトファイル（my_script.js)にWaypointsのスクロール制御を実装します。
以下はアニメーションさせたい要素（#profile_strength img）がブラウザ上部から「70%」の位置にきたときに、処理が実行される処理です。

jQuery('#profile_strength img').waypoint(function(){
  if(jQuery('#profile_strength img').css('visibility') == 'visible') {
    //すでに表示中のときは何もしない
  }
  else {
    jQuery('#profile_strength img').css("visibility","visible");
    jQuery('#profile_strength img').toggleClass('animated fadeInUp');

  }
}
,{offset: '70%'}
);

非表示にしていた要素を表示させ、toggleClassで”animated fadeInUp”というクラス名を付与することで、アニメーションを実行することができます。（６〜７行目）
※Animate.cssは、クラス名を付与するだけでアニメーションさせることが可能です。fadeInUpを違うクラス名に変えることで様々なアニメーションを付けることができます。付与するクラス名は以下サイトを参考ください。
Animate.css

※２行目のif文は、すでにアニメーション要素が表示されていた場合は、何もしないようにする処理です。

最後に

以上、WaypointsとAnimate.cssでスクロールアニメーションを実装する方法をご紹介しました。
ちょっとしたアニメーションを入れることで、見る人の興味を引き魅力的なコンテンツに仕上がると思います。
みなさんも是非お試しください！

それでは！