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の最後で読み込み、その後で初期化します。
<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の設定を追加します。
<!-- フェードアップ -->
<div data-aos="fade-up"></div>
<!-- 回転 -->
<div data-aos="flip-left"></div>
<!-- ズーム -->
<div data-aos="zoom-in"></div>
これだけでビュンビュン動きます！
スピードやイージングなど、オプションで細かく設定できます。
全体にまとめてオプション指定する時は、初期化のついでに設定します。
AOS.init({
offset: 120,
delay: 0,
duration: 400,
easing: 'ease',
once: false,
mirror: false,
anchorPlacement: 'top-bottom',
});
要素一つずつにオプションを指定することもできます。
<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不要】
もっと細かく設定したい時には、独自のクラスを作って指定することができます。
[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);
}
}
}
<div data-aos="new-animation"></div>
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;
}
}
}
アニメーションはCSSで制御されているので、レスポンシブ表示で画面サイズごとに微妙に変えたい時にも応用できますよ。
AOSは便利なプラグインですが、ウィンドウ全体のスクロールにしか反応しません。
縦100%のdiv要素の中にover-flow:scroll;でコンテンツを置くことがありますが、そういう時には使えません。
他のプラグイン（特に、ページ全体をdivで包んで動きをつけたり、スクロールを制御する系）との組み合わせに注意が必要です。
