スクロールに応じてアニメーションを実装できるJSライブラリ「AOS」

スクロールに応じてアニメーションを実装できるJSライブラリを紹介します。

AOS

AOSの紹介

スクロールに応じて要素にアニメーションを実装することができるライブラリです。

フェード、フリップ、ズームなど、様々なアニメーションを実装することができます。

アニメーションの速度や種類もシンプルに設定することができ、モバイル端末や画面の横幅が一定以下の環境ではアニメーションを無効にできるなど、必要なオプションが揃っています。

使い方

ソースコードはGitHubで公開されています。

基本の使い方

CSS

スタイルシートを読み込みます。

<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />

HTML

アニメーションを実行したい要素に、data-aos属性をつけます。

<div data-aos="fade-up"></div>

JS

スクリプトを読み込みます。

<script src="bower_components/aos/dist/aos.js"></script>

スクリプトを実行します。

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

これで、アニメーションの実装ができます。

オプション

速度やアニメーションの調整など、様々なオプションもいろいろと用意されています。

<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">

オプションは、個別の要素ではなく、全体に共通で設定することもできます。

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

モバイル端末ではアニメーションを無効にすることができます。設定できるのは、mobile（phone & tablet）、phone、tabletの3種類です。

<script>
  AOS.init({
    disable: 'mobile'
  });
</script>

画面の横幅によって無効にすることもできます。

<script>
  AOS.init({
    disable: window.innerWidth < 1024
  });
</script>