先日、WordPressにスクロールアニメーションを実装したときに、検索してもまとまった情報がなかったので書いておきます。
- WordPressでテーマはCocoon
- スクロールアニメーションライブラリのAOSを使用
- JavaScriptでdata-aos=”xxx”を記事リストの要素全てに追加
- JavaScriptを使い、idではなくclassで要素を書き換える
- 記事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で、アニメーションの実装が非常に簡単になりました。けれどやはりアニメーションは、それなりに処理能力を要求します。加えて全部がアニメーションして、でもウザくないデザインはなかなか難しい。
使いどころを間違えないようにしたいものですね。
