AOS（Animate On Scroll Library）はページのスクロールに合わせて要素をアニメーションするJSスクリプトです。
jQuery不要で、設定も簡単で扱いやすくおすすめです。当サイトでも使用しています。
公式サイト：AOS – Animate on scroll library
GitHub：GitHub – michalsnik/aos:Animate on scroll library
基本的な使い方
読み込み・初期化
CSSとJSはダウンロードしてもよし、CDNを読み込んでもよし。
JSはbodyの最後で読み込み、その後で初期化します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<head> ... <!-- CSS読み込み --> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> </head> <body> ... <!-- JS読み込み --> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <!-- 初期化する --> <script> AOS.init(); </script> </body> |
要素にアニメーションを設定
HTMLで、アニメーションする要素にAOSの設定を追加します。
|
1 2 3 4 5 6 7 8 |
<!-- フェードアップ --> <div data-aos="fade-up"></div> <!-- 回転 --> <div data-aos="flip-left"></div> <!-- ズーム --> <div data-aos="zoom-in"></div> |
これだけでビュンビュン動きます！
オプション
スピードやイージングなど、オプションで細かく設定できます。
全体に指定する場合
全体にまとめてオプション指定する時は、初期化のついでに設定します。
|
1 2 3 4 5 6 7 8 9 |
AOS.init({ offset: 120, delay: 0, duration: 400, easing: 'ease', once: false, mirror: false, anchorPlacement: 'top-bottom', }); |
要素ごとに指定する場合
要素一つずつにオプションを指定することもできます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center" > </div> |
オプションの詳細については公式サイトをご覧ください。
AOSを紹介するブログ記事でもみなさん丁寧に解説されています。ぜひご参考に。
jQuery非依存のスクロールアニメーションライブラリ「AOS」
スクロール時のアニメーションを簡単実装「AOS」の使い方【jQuery不要】
細かい調整はCSSで
もっと細かく設定したい時には、独自のクラスを作って指定することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[data-aos="new-animation"] { opacity: 0; transition-property: transform, opacity; &.aos-animate { opacity: 1; } @media screen and (min-width: 768px) { transform: translateX(100px); &.aos-animate { transform: translateX(0); } } } |
|
1 |
<div data-aos="new-animation"></div> |
アニメーションはCSSで制御されているので、レスポンシブ表示で画面サイズごとに微妙に変えたい時にも応用できますよ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
li { display: inline-block; width: 100%; // 大きい画面のとき2列で表示 @media screen and (min-width: ７６８px) { width: 50%; } } li[data-aos] { transition-delay: .0s; // 大きい画面に2列で表示するとき // 偶数番目の要素のアニメーション開始を0.8秒遅らせる @media screen and (min-width: 768px) { &:nth-child(even) { transition-delay: .8s; } } } |
使用時の注意
AOSは便利なプラグインですが、ウィンドウ全体のスクロールにしか反応しません。
縦100%のdiv要素の中にover-flow:scroll;でコンテンツを置くことがありますが、そういう時には使えません。
他のプラグイン（特に、ページ全体をdivで包んで動きをつけたり、スクロールを制御する系）との組み合わせに注意が必要です。
