WordPressでスクロールに合わせてふわっと表示させる

こんにちは。
きょうはたまに現れるWEB関連記事です…(私自身の備忘録でもあります)。
興味のない方ごめんなさい。
スクロールさせると要素がふわっと表示されるおなじみの機能、WordPressではどうやって実装したら良いの?という記事です。
今回はanimate.cssとScrolla.jsを使って実現します!
1.必要なファイルをダウンロードする
① animate.min.css
② scrolla.jquery.min.js
それぞれGithubよりファイル一式をダウンロード後、該当ファイルだけを取り出してください。
(scrolla.jquery.min.jsはdistフォルダの中にあります)
2.my_script.jsを作る
jQuery('.animate').scrolla({ mobile: false, // モバイル時の有効・無効 once: true // 効果を一度きりにするかどうか });
上記だと、「animate」というclassを持った要素にscrollaが実行されるようになります。
オプションは「mobile」、「once」の2つです。
WordPressでは「$」がエラーになってしまうので、「jQuery」と表記します。
3.ダウンロードしたファイルとmy_script.jsをアップロードする
FTPアップローダーなどを使って、ファイルをアップロードします。
① animate.min.cssはthemeフォルダの直下に入れ、
② scrolla.jquery.min.jsと
③ my_script.jsは、themeフォルダ下のjsフォルダに入れます。
4.アップロードしたファイルを読み込ませる
① animate.min.cssの読み込み
header.phpのheadタグ内に以下のコードを追記します。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/animate.min.css" type="text/css">
② functions.phpに以下のコードを追記します。
function add_script(){ //my scriptの読み込み wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), '', true); //scrollaの読み込み wp_enqueue_script('wow', get_template_directory_uri() . '/js/scrolla.jquery.min.js', array('jquery'), '', false); } add_action( 'wp_enqueue_scripts', 'add_script' );
5.効果を与えたい要素に「animate」というclassと、カスタムデータ属性を付与します。
最低限記入するデータ属性は「data-animate」です。
<div class="animate" data-animate="fadeIn" data-duration="3s">フェードインさせたい</div>
指定できるカスタムデータ属性は以下の通り
data-animate | 効果を適用するanimate.cssのセレクタを指定します。 効果とセレクタ名はanimateのページで確認できます。 |
data-duration | animation-durationプロパティ(効果にかかる時間)を指定します。1秒なら1sです。 |
data-delay | animation-delayプロパティを(効果が始まるまでの時間)指定します。 |
data-iteration | animation-iteration-countプロパティ(アニメーションを繰り返す回数)を指定します。infiniteを設定すると無限に繰り返します。 |
data-offset | アニメーションが開始されるまでのスクロール距離。data-offset=”100″の場合、本来の実行位置から100px分上か下にスクロールされた段階でアニメーションが開始されます。 |
実際の動作を確認して完成です!