AOSライブラリで簡単にスクロールアニメーションを実装する

今回は、Webサイトに動きをつけるためのライブラリ「AOS（Animate On Scroll）」についてご紹介します。スクロールするたびに要素がふわっと現れたり、スライドしてきたりするアニメーション、ありますよね？あれを驚くほど簡単に実装できるのがAOSです。

「難しそう…」と思うかもしれませんが、HTMLとCSSに少し手を加えるだけでプログラミング初心者でも簡単に導入できます。

AOSとは？

AOSは、Webページをスクロールしたときに、設定した要素にアニメーションを適用するJavaScriptライブラリです。jQueryなどの他のライブラリに依存せず、軽量で扱いやすいのが特徴です。

主なアニメーションの種類には、以下のようなものがあります。

これらのアニメーションを、要素ごとにカスタマイズして実装できます。

AOSの実装はたったの3ステップで完了します。

まず、HTMLファイルに、AOSのCSSとJavaScriptを読み込むためのCDNリンクを記述します。

HTMLの<head>タグの中にCSS読み込みを記述

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

HTMLの<\body>タグの直前にJavaScript読み込みを記述

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

次に、読み込んだJavaScriptを初期化します。これもHTMLファイルの<body>タグの閉じタグ（</body>）の直前に書くだけでOKです。

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

最後に、アニメーションを適用したいHTML要素にdata-aos属性を追加します。

たとえば、要素をふわっと現れさせたい場合は、data-aos="fade-up"と記述します。

<div data-aos="fade-up">
  このdiv要素がスクロールでふわっと現れます。
</div>

これだけで、スクロールしたときに要素が下からフェードインするアニメーションが実装されます。めっちゃ簡単！

AOSには、アニメーションの速度やタイミングなどを細かく設定できるオプションがたくさんあります。これらのオプションも、data-aos属性に続けて記述するだけです。

これらのオプションを組み合わせることで、より凝ったアニメーションも可能です。

<div data-aos="fade-left" data-aos-duration="2000" data-aos-delay="500">
  左からスライドして、2秒かけて現れます。
</div>

AOSライブラリは、Webサイトに動きをつけたいけど、複雑なJavaScriptは書きたくない…という方にぴったりのツールです。

CDNを読み込んで、初期化して、HTMLに属性を追加するだけという手軽さが魅力的ですよね。家事や育児の合間のちょっとした時間でも、楽しくWeb制作を進められます。

ぜひ、あなたのブログやポートフォリオサイトにAOSを取り入れて、訪問者を「おっ！」と思わせるようなWebサイトを作ってみてくださいね✨

AOS公式ドキュメント

より詳しい使い方や全てのアニメーションの種類は、公式サイトで確認できます。