スクロールアニメーションが当たり前の昨今。様々なプラグインがあると思いますが、個人的にaos.js推しです。
簡単な上に、オプションが豊富でカスタマイズが容易。マジで使えるわ〜
なので、概略をメモします。
AOS.jsとは
AOS.js（Animate On Scroll）は、ウェブサイトにスクロールアニメーションを追加するための軽量で使いやすいJavaScriptライブラリです。AOS.jsを使用することで、要素が画面内にスクロールされる際にアニメーション効果を適用することができます。その簡単な設定と豊富なアニメーションオプションから、ウェブデザイナーや開発者にとって優れたツールとなっています。
AOS.jsの特徴
シンプルな導入
AOS.jsの導入は非常に簡単です。必要なのはAOSライブラリのスクリプトと、適用したい要素に適切な属性を追加するだけです。
軽量
AOS.jsは軽量なライブラリであり、ページの読み込み時間に大きな影響を与えません。これにより、ウェブサイトのパフォーマンスを損なうことなくアニメーションを実装できます。
カスタマイズ可能なアニメーション
AOS.jsには多くのアニメーションオプションが用意されており、要素が表示される際の動きや速度、遅延などを細かく調整できます。フェードインやズームインなどの一般的なアニメーションから、カスタムエフェクトまで幅広い選択肢があります。
対応する要素の選択
AOS.jsは適用する要素をCSSセレクタで選択できます。これにより、特定の要素だけにアニメーションを適用することが可能です。
モバイルフレンドリー
AOS.jsはモバイルデバイスにも適しており、スマートフォンやタブレットでのアニメーションもスムーズに動作します。
AOS.jsの使い方
以下はAOS.jsを使ったスクロールアニメーションの簡単な導入手順です。
AOS.jsのスクリプトを追加
HTMLファイル内でAOS.jsのスクリプトを読み込みます。以下はCDNを使用する例です。
同様にCSSも読み込みます。
javascript
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
css
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
ダウンロードして使用する場合は公式サイトからお願いします。
要素にアニメーションを適用する
アニメーションを適用したい要素にdata-aos属性を追加します。この属性の値にはアニメーションの種類を指定します。
<div data-aos="fade-up">この要素がフェードインします。</div>
AOSの初期化
AOS.jsを初期化するためのJavaScriptコードを追加します。通常はページのロード時に初期化します。
<script> AOS.init(); </script>
オプションの設定
オプションをカスタマイズすることも可能です。例えば、遅延を設定する場合は以下のようにします。
<script>
AOS.init({
delay: 200, // アニメーションが遅延して表示される
});
</script>
オプションの種類は以下です。
| オプション | 説明 | 例 |
| delay | アニメーションの遅延時間（ミリ秒）を設定 | delay: 200 |
| duration | アニメーションの実行時間（ミリ秒）を設定 | duration: 800 |
| easing | アニメーションのイージング関数を設定 | easing: ‘ease-in-out’ |
| offset | アニメーションの発動位置をオフセットで設定 | offset: 100 |
| once | アニメーションを1回きりに制限するかどうか設定 | once: true |
| mirror | アニメーションをスクロール方向に繰り返すか設定 | mirror: true |
| anchor-placement | アニメーション要素の基準点を設定 | anchor-placement: ‘top-center’ |
| startEvent | アニメーションを開始するイベントを設定 | startEvent: ‘DOMContentLoaded’ |
| disable | 特定の画面幅でAOS.jsを無効にするか設定 | disable: ‘mobile’ |
| initClassName | 初期化時に適用されるクラス名を設定 | initClassName: ‘aos-init’ |
| animatedClassName | アニメーション中に適用されるクラス名を設定 | animatedClassName: ‘aos-animate’ |
複数オプション設定例
AOS.init({
delay: 200,
duration: 800,
easing: 'ease-in-out',
offset: 100,
once: true,
mirror: true,
anchorPlacement: 'top-center',
startEvent: 'DOMContentLoaded',
disable: 'mobile',
initClassName: 'aos-init',
animatedClassName: 'aos-animate'
});
各オプションは、ウェブサイトのデザインやアニメーションの要件に合わせて調整できます。
また、data-aos属性内に直接オプションを記述することもできます。
<div data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" data-aos-easing="ease-in-out"> この要素が遅延してフェードインします。 </div>
このように、data-aos属性にアニメーションの種類を記述した後に、data-aos-オプション名の形式でオプションを記述します。上記の例では、data-aos-delayで遅延時間、data-aos-durationでアニメーション時間、data-aos-easingでイージング関数を設定しています。
この方法を使用することで、各要素ごとに異なるオプションを指定することができます。ただし、スクリプト内でオプションを指定する方法と比べると、複雑な設定や多くの要素に適用する場合には、スクリプト内で設定する方が効率的かもしれません。
CSSでコントロールする
アニメーションを任意のCSSでコントロールすることも可能です。
css
.fade-up {
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
html
<div class="fade-up" data-aos="fade-up"> この要素がフェードインします。 </div>
このように記述することで、設定したdelayと似た効果が得られます。
ちょっと応用編
AOS.jsで、ある要素が表示されたらオブジェクトをアニメーションで出現させることもできます。
<div class="side-item trigger-right" data-aos="fade-left" data-aos-anchor="#trigger"> <img src="img/1.jpg"> </div> 〜略〜 <div>〜</div> <div>〜</div> <div>〜</div> <div id="trigger">〜</div> <div>〜</div> <div>〜</div>
こうすることで、trigger要素が表示されたらimg/1.jpgが表示されます。
まとめ
AOS.jsはウェブサイトに簡単かつ軽量なスクロールアニメーションを導入するのに優れたツールです。シンプルな設定と多彩なアニメーションオプションにより、ウェブデザインにダイナミックな要素を追加する際に役立ちます。是非AOS.jsを活用して、魅力的なウェブページを作成してみてください。
