【WordPress】スクロールアニメーションAOSのclassをJavaScriptで追加する方法

先日、WordPressにスクロールアニメーションを実装したときに、検索してもまとまった情報がなかったので書いておきます。

  1. WordPressでテーマはCocoon
  2. スクロールアニメーションライブラリのAOSを使用
  3. JavaScriptでdata-aos=”xxx”を記事リストの要素全てに追加
  4. JavaScriptを使い、idではなくclassで要素を書き換える
  5. 記事Aと記事Bのアニメーションに時間差をつける

 上記のような実装方法です。要するに記事一覧のエントリカードひとつずつに、個別にスクロールアニメーションを追加します。

スポンサーリンク

スクロールアニメーションとは

 スクロールアニメーションは最近、動くウェブサイトでよく取り入れられているアニメーションのひとつです。

 効果は目を引く、スタイリッシュに見えるなどです。ユーザーの注意を特に引きたい箇所に使用すると、とても効果的です。例えばピックアップ記事や、CTAボックス、ランディングページへのリンクなどです。

スクロールアニメーションライブラリ「AOS」

 スクロールアニメーションライブラリはたくさんありますが、今回はAOSを使用しました。

AOS – Animate on scroll library

 CSSとJavaScriptファイルを読み込み、アニメーションさせたい要素にclassを追加するだけで、スクロールアニメーションを実装できます。

 ……が、WordPressで記事リストのループにclassを追加しようとすると、やや面倒くさいのも事実です。テーマによっては、記事リストのループ処理がどこにあるの? とハマることも。

 サクッとJavaScriptで、classを追加した方が早い場合が多いでしょう。

WordPressでAOSを使用する方法

 実際にWordPressでAOSを使用する方法と、classの追加の仕方を解説します。

AOSの読み込み

 ヘッダー部分にcss、フッターの</body>直前にJavaScriptを読み込みます。

<head>~</head>内に記述

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

フッターの</body>直前に記述

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

 ダウンロードするなら、上記ではなくダウンロードしたディレクトリのURLから読み込んでください。

 基本的に後は、スクロールアニメーションを入れたい箇所に、AOS – Animate on scroll libraryを参考にして、下記のようなclassを追加するだけです。

<div data-aos="fade-up"></div>

AOSのためのclassをJavaScriptで追加

 追加するclassが「class=”1 2 追加のclass”」なら、function.phpからWordPressの関数で追加してもOKでした。しかしAOSは「data-aos=”fade-up”」とか追加しろと。

 多分WordPressの関数で、これは追加できません。

var classElements = document.getElementsByClassName('a-wrap');
for (var i = 0; i < classElements.length; i++) {
	classElements[i].setAttribute('data-aos', 'zoom-in');
}

 getElementsByClassName()はgetElementById()と異なり、配列で返ってきます。従ってforで回して、個別に属性と属性値をsetAttribute()で追加してます。

 なおAOSはオプションもかなりあるので、個別に指定してカスタマイズも可能ですよ。

 上記のコードをコピペする場合は、a-wrapの部分を書き換えたいクラス名にしてください。

WordPressでcalssを追加する方法まとめ

 今回のクラスの追加方法は、同じクラスを持つ要素全てを書き換えられるので、色々と応用が利きます。

 JavaScriptやCSS3で、アニメーションの実装が非常に簡単になりました。けれどやはりアニメーションは、それなりに処理能力を要求します。加えて全部がアニメーションして、でもウザくないデザインはなかなか難しい。

 使いどころを間違えないようにしたいものですね。

 

IT関連コラム
スポンサーリンク
スポンサーリンク
スポンサーリンク
この記事を書いた人

「難しいこともわかりやすく」政治・経済コラムをメインに発信。2019年まで16年間自営業→SEO/ウェブ制作/ウェブライター/進撃の庶民管理人などで活動中。
日本で数少ない現代貨幣理論の論者(MMTer)。
左右や保守・革新にこだわらず「庶民(自分含む)のためになる政治経済情報」をブログで掲載。
Twitterか右下ベルマークからフォローをお願いします。
政治ブログランキングで応援する

高橋 聡をフォローする
高橋聡オフィシャルブログ バッカス
申し込む
通知する
0 Comments
インラインフィードバック
すべてのコメントを表示