AOS.jsで簡単にスクロールアニメーションを使おう!WordPressプラグインも紹介

当サイトには広告が含まれています。

スクロールするとフワッと浮かび上がってきたり、横からスライドして要素が出現したりするアニメーションってよく見かけますよね。

それを初心者の方でも簡単に導入できる、「AOS」という無料javascriptライブラリの使い方を紹介します。
難しい話は一切しません。実際のサイト制作で使う項目のみ記載していますので、すぐにお使いいただけます。

※ワードプレスのブロックエディタでAOSアニメーションを使う場合はプラグイン導入をおすすめします!

WordPressでAOSを使える無料プラグインはこちら

目次

ステップ1:CSSとjsを読み込む

詳しい使い方はAOSの公式サイトにありますので、そこから引用していきます。
アニメーションのサンプルと指示の仕方も公式サイトにあるので、動き方などはそちらを参考にしてください。
https://michalsnik.github.io/aos/

CSSの読み込み(CDN)

以下のCSSをhead内に記述します。

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

javascriptの読み込み(CDN)

以下のjsをbodyタグが終了する直前(</body>の上の行)に貼り付けてください。

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

ひとまずこれで準備は出来ました。
次にアニメーションをつけたい要素に指示を書きましょう。

ステップ2:動かしたい要素にdataタグを記述する

AOSの公式サイトの動きサンプルを見ながら、アニメーションをつけたい要素を指定しましょう。

指定する方法としては、個別にdata-aosというタグを使用します。
例えば【data-aos=”fade-up”】こんな感じでタグ内に記述してあげます。

例えば画像にアニメーションをつけたい場合は….

HTML
<img data-aos="fade-up" src="./images/test.jpg" alt="画像">

そうすると、下から上にフワッと出てくるfade upがかかります。
divでもsectionでもfigureでもliでもなんでもOKです。
アニメーションさせたい部分にdata-aos=”〇〇”をタグに追加します。

よく使うアニメーションのパラメータ

fade-up下から上にフェードイン
fade-down上から下にフェードイン
fade-right左から右にフェードイン
fade-left右から左にフェードイン
flip-left左からフリップ
flip-right右からフリップ
flip-up上からフリップ
flip-down下からフリップ

私はフェードイン以外はあまり使いませんが、この他にも公式サイトにはたくさん用意されています。

ステップ3:アニメーションをカスタマイズする

上記の手順だけでアニメーションは実装できているはずですが、デフォルトのままでは少々使いづらいので、私がいつも使っているオプションを紹介します。

まずはページ内全てのアニメーションに適用させるためのオプションを指定します。
最初にコピペしたAOSを実行させるためのjsを書き換えます。

カスタマイズ例:一度きりのアニメーション&スピードをゆっくりに。

とりあえずこれをコピペしてもらったらいい感じにはなるかと思います。

JavaScript
<script>
  AOS.init({
    delay: 200, //実行を遅れさせる
    duration: 800, //アニメスピード(大きいほどゆっくり)
    once: true //一回きり(スクロールするたびに動かしたい時はfalseにする)
  });
</script>

例えば指定した要素が画面内に入ったら即アニメーションが動く場合がありますが、そうするとせわしないですし、意図した雰囲気を表現できない場合があります。
そういう時はdelayで発火自体を遅れさせましょう。お好みで調整してください。

個別に細かく指定したい場合

上記は全部のアニメーションに自動でかかるよう書きましたが、個別に指定したい場合もあります。
そういうのもAOSでは可能です。
個別に要素のタグに記入するときに、一緒にタグ内に書くことで可能になります。

例1:個別にアニメスピードを指定する

HTML
<div data-aos="fade-up" 
    data-aos-duration="3000">
</div>

例2:アップとかせず、その場でフェードイン

HTML
<div data-aos="fade-zoom-in"
     data-aos-easing="ease-in-back"
     data-aos-delay="300"
     data-aos-offset="0">
</div>

例3:表示されるまでの距離を指定

HTML
<div data-aos="fade-left"
     data-aos-offset="500">
</div>

など、カスタマイズは自由に行えますので、あなたの意図に沿ったアニメーションを導入してみてください!

アニメーションを使用する際の注意点

見ていて面白い、かっこいいスクロールアニメーションですが、実はユーザー視点ではあまり効果的だとは言えません。アニメーションに煩わしさを感じているユーザーは意外と多いです。なので、あまり使いすぎないことを心がけてください。

私が普段から気をつけているポイントは・・・

・メインビジュアル、ファーストビューには付けない
・お問い合わせボタン、電話番号などの最重要項目には付けない

AOSは比較的安定しているjsですが、環境によっては動かなかったり、遅かったりします。
ファーストビューで非表示になってしまっている項目があるのは良くないですので、メインビジュアルなどにはフェードインのアニメーションは付けないほうがいいかと思います。

また、お問い合わせボタンや絶対に誘導させたい要素には付けないでおきましょう。何かの拍子でアニメーションが動かなかった場合、きちんとしたコンバージョンが得られません。

WordPressでAOSを使用したいときは?

AOSがベースになった無料プラグインが配布されていますのでそちらを利用します。
色々とアニメーションプラグインはあるのですが、
自分が試して使い勝手が一番近いと思ったのが「Animations for Blocks」です。

WordPress.org
Animations for Blocks Allows to add animations to block editor blocks on scroll.

日本語に翻訳されていませんが、ブロックエディタでAOSのアニメーション実装を再現するにはこのプラグインが一番いいかと思います。無料なので気軽に試せるので一度使ってみてください!

よかったら下記もご覧ください。

デザイン作るの難しい〜!と感じたら

デザイン・ホームページで

お困りのことがありましたら、
私たちクートスラボにご依頼ください!
実績多数の女性クリエイターチームが、

どんなお悩みも解決します。

\ 南大阪・泉州でデザインのご依頼はこちら /

シェアお願いします!
  • URLをコピーしました!
目次