スクロールに合わせて要素にアニメーション（WordPress版）

こんにちは！今日から8月ですが、今年は例年に比べるとやや涼しいような気がしますね。
今日はスクロールに合わせて要素をふわっと表示させたり、動かしたりする方法についてメモしておきます。
animate.cssとScrolla.jsを使って実装します。デモはこちら

animate.css、Scrolla.jsとは

animate.cssは無料で公開されている便利なCSSのライブラリ。
フェードイン、フェードアウト、ズームイン、ズームアウトなどなど、約100種類のさまざまなムーブを簡単に導入できますよ。
こちらのサイトで動きのサンプルを確認できます。
open_in_new https://animate.style/

Scrolla.jsはJqueryと併用することで、スクロールに合わせて特定の要素にanimateのclassやデータを追加したり削除したりできる便利なjQueryのプラグインです。
WordPressの場合、Jqueryはすでに読み込まれていますので、Scrolla.jsだけ読み込めばOKです。

実装方法

1.animate.cssのアップロードと読み込み

animate.cssをダウンロードして読み込みます。
こちら↓のGitHubから「animate.css」（もしくはanimate.css.min）をダウンロードして、FTPアップローダーなどを使ってテーマフォルダ内直下にアップロードします。

open_in_new https://github.com/animate-css/animate.css

アップロードしたCSSを読み込みます。以下のコードを<head>内に追記します。

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

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

CDNを使う場合は、以下のコードを<head>内に追記します。

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

2.Scrolla.jsをアップロード

open_in_new こちらのGitHubから「jquery.scrolla.min.js」をダウンロードして（※）、テーマフォルダ内にアップロードします。テーマフォルダに「js」というフォルダを作ってそこに入れましょう。
※「dist/js」の中に入っています。

4.jquery.scrolla.min.jsを読み込んで定義

以下のコードを<head>に追記して、アップロードしたjquery.scrolla.min.jsを読み込み、コードで定義します。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.scrolla.min.js"/></script>
<script>
  jQuery(function(){
    jQuery('.animate').scrolla({
      mobile: false, // モバイル時の有効・無効
      once: true // 効果を一度きりにするかどうか
    });
  });
</script>

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.scrolla.min.js"/></script>
<script>
  jQuery(function(){
    jQuery('.animate').scrolla({
      mobile: false, // モバイル時の有効・無効
      once: true // 効果を一度きりにするかどうか
    });
  });
</script>

上記だと、「animate」というclassを持った要素にscrollaが実行されるようになります。
オプションは「mobile」、「once」の２つです。

5.要素にclassとデータ属性を追記

効果を与えたい要素に「animate」というclassと、カスタムデータ属性を付与します。

<div class="animate" data-animate="bounce" data-duration="1s">ブロック</div>

<div class="animate" data-animate="bounce" data-duration="1s">ブロック</div>

scrollaで設定できるデータ属性は以下の通り。

data-animate	適用したいanimate.cssのセレクタ。 open_in_new こちらのサイトで設定されているセレクタから「animate__」を抜いて指定（※）
data-duration	アニメーションの長さ（animation-duration）。1秒なら1s
data-delay	読み込まれてからアニメーションが開始されるまでの長さ（animation-delay）。1秒なら1s
data-offset	アニメーションが開始されるまでのスクロール距離。 data-offset=”100″の場合、本来の実行位置から100pxスクロールされた段階でアニメーションが開始されます。
data-iteration	アニメーションを繰り返す回数（animation-iteration-count）。 infiniteを設定すると無限にループ。

※かつてanimate.cssでは「animate」や「bounce」というclassが使われていましたが、現在では「animate__animated」「animate__bounce」という形式に変わっています。
しかしscrollaプラグインでは依然として「animate」や「bounce」というclassに対応する形になっていますので、scrollaプラグインを使う場合は要素に「animate__animated」ではなく「animate」というclassをつけ、アニメスタイルのcss（data-animate）は「animate__bounce」なら「bounce」のみという従来の表記で設定しましょう。

スクロールに合わせて要素にアニメーション（WordPress版）

animate.css、Scrolla.jsとは

実装方法

1.animate.cssのアップロードと読み込み

2.Scrolla.jsをアップロード

4.jquery.scrolla.min.jsを読み込んで定義

5.要素にclassとデータ属性を追記

デモ

bounce

wobble

heartBeat

backInLeft

bounceOutLeft

fadeIn

fadeInUp

fadeOutBottomRight

rotateInUpRight

jackInTheBox

zoomIn

zoomOutDown