スクロール時にアニメーションしながら要素を表示することができるJavaScriptライブラリ「AOS(Animate On Scroll Library)」

スクロール時にアニメーションしながら要素を表示することができるJavaScriptライブラリ「AOS(Animate On Scroll Library)」

スクロール時にアニメーションしながら要素を表示することができるJavaScriptライブラリ「AOS(Animate On Scroll Library)」

AOSは、スクロールと連動して、要素が可視範囲に入ったらアニメーションしながら表示させることができるJavaScriptライブラリです。様々なアニメーションが用意されているので、色んなサイトで活用することができます。

動きについては、公式サイトでご確認いただけます。

デモページを見る

AOSの導入手順

ステップ1. ファイルのダウンロードと設置

まずはGitHubからファイルをダウンロードして、以下のファイルをサーバーにアップロードします。

  • dist/aos.css
  • dist/aos.js

ファイルを設置したら、ファイルを読み込みます。<head>~</head>に以下を追加します。


<link href="dist/aos.css" rel="stylesheet">
<script src="dist/aos.js"></script>

必要なファイルはCDNでも提供されています。


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

ステップ2. HTMLのマークアップ

HTMLでは属性を使ってアニメーションの種類を指定します。

<div data-aos="animation_name">

例えば、フェードインさせたい要素では、以下のように指定します。

<div data-aos="fade-in">フェードイン</div>

指定できるアニメーションの種類は、以下の通り豊富に用意されています。

  • fade-in
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left
  • flip-up
  • flip-down
  • flip-left
  • flip-right
  • slide-up
  • slide-down
  • slide-left
  • slide-right
  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

また、アニメーションの種類だけでなく、アニメーションの時間や遅延なども属性で指定することができます。

<div data-aos="fade-in" data-aos-offset="120" data-aos-duration="400" data-aos-easing="ease-in-sine" data-aos-delay="0" data-aos-anchor="null" data-aos-anchor-placement="top-bottom" data-aos-once="false">フェードイン</div>
data-aos アニメーションの種類
data-aos-offset アニメーション実行のトリガーとなるオフセット
data-aos-duration アニメーションの時間
data-aos-easing アニメーションの滑らかさ
data-aos-delay 遅延
data-aos-anchor オフセットがカウントされるアンカー要素
data-aos-anchor-placement アニメーションがトリガーされるアンカーの位置
data-aos-once アニメーション実行を一度のみにする

ステップ3. AOSの実行

最後にスクリプトを実行すれば完了です。


<script>
  AOS.init();
</script>

オプションも併せて指定する場合は、以下のように記述します。


<script>
  AOS.init({
    offset: 200,
    duration: 600,
    easing: 'ease-in-sine',
    delay: 100,
  });
</script>

あとがき

非常に豊富なアニメーションを簡単に実装できて良いですね。jQueryにも依存しないので、既存のサイトにも導入しやすいと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です