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

こんにちは。
きょうはたまに現れるWEB関連記事です…(私自身の備忘録でもあります)。
興味のない方ごめんなさい。
スクロールさせると要素がふわっと表示されるおなじみの機能、WordPressではどうやって実装したら良いの?という記事です。
今回はanimate.cssScrolla.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' );
WordPressの場合、jQuery本体はすでに読み込まれているため改めて読み込む必要はありませんが、その他の場合はhttps://jquery.com/download/のサイトからダウンロードして読み込むか、CDNでリンクさせる必要があります。
 

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分上か下にスクロールされた段階でアニメーションが開始されます。

実際の動作を確認して完成です!



おすすめ