先日パララックス効果を実現してくれる ScrollReveal の使用方法を紹介する記事を書きました。
他のライブラリとも比較したかったため、AOS（ Animate on scroll library）を調査してみました。
この記事では、使用方法、オプション等を説明し、デフォルト及びオプション追加の実装の確認ができます。
要素毎のデファルトのdistance値の変更方法もご紹介いたします。
AOS
特徴
デフォルトの設定値でも、満足できるアニメーションの種類が豊富です。
HTMLタグにデータ属性を追記し、script でAOSを初期化する（呼び出す）だけでアニメーションを実装できます。
scriptの記述量は少ないため、別途JSファイルを用意せずともHTMLファイル内で完結することも可能です。
オプションの追加もHTMLタグ に追加しますが、CSSでデータ属性を利用して更にカスタマイズも可能です。
デフォルトでは、アニメーションはスクロールの都度繰り返します。
なお、jQueryは不要です。
使用方法の概要
使用するファイル
- HTMLファイル
- CSSファイル（SCSSファイル）
- JSファイル（オプション等少なめなら、HTMLファイルで完結することも可能）
記述方法 （CDN読込方法）
①HTMLファイルでCDN及び必要ファイルを読み込みます。
<head>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style.css"> <!-- ご自身のパスに変更 -->
</head>
<!-- 途中省略 -->
<!-- body閉じタグ直前に -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<!-- JSファイル記載の場合は以下は記載不要 -->
<script>
AOS.init();
</script>
<!-- JSファイル記載の場合は自身のJSファイルを読み込み -->
<script src="main.js"></script>
</body>②JSファイルを使用する場合
AOS.init(); // デフォルトの場合はこれだけでOK
AOS.init({ // 以下が、デフォルト値。変更する場合はこれを必要箇所のみ上書き
disable: false, // デフォルトではスマホもPCでもアニメーションが発生、値は'phone', 'tablet', 'mobile'を選択可
startEvent: 'DOMContentLoaded', // 特に気にする必要はないと思います。
initClassName: 'aos-init', // 初期化後に適用されるクラス（デフォルトのままでよいと思います。）
animatedClassName: 'aos-animate', // アニメーションが発生した時に自動付与されるクラス
useClassNames: false, // trueの場合、スクロール時にクラスとして `data-aos`のコンテンツを追加
disableMutationObserver: false, // 自動変換の検出を無効にするか（デフォルトのままでよいと思います。）
debounceDelay: 50, // ウィンドウのサイズ変更中に使用されるdebounceの遅延、イベントを間引く処理（デフォルトのままでよいと思います。）
throttleDelay: 99, // ページのスクロール中に使用されるthrottleの遅延、イベントを間引く処理（デフォルトのままでよいと思います。）
// 以下は、HTMLファイルのタグ内で要素ごとに上書きも可能
offset: 120, // アニメーションの開始位置
delay: 0, // アニメーションの遅延時間、50ミリ秒～3000ミリ秒で設定可
duration: 400, // アニメーションにかける時間、50ミリ秒～3000ミリ秒で設定可
easing: 'ease', // アニメーションの動き
once: false, // アニメーションの繰り返しの指定
mirror: false, // スクロールしながらアニメーション化するか（特に気にする必要はないと思います。）
anchorPlacement: 'top-bottom', // 要素のどの位置がウィンドウのどの位置に来た時にアニメーションを発生させるか
});CODEPEN でデフォルトで確認
すべてのアニメーションを以下の条件（デフォルト値）で確認してみます。
- CDN読み込み
- JSファイル不使用
- HTMLファイルタグ内のオプション追加なし
- CSSでアニメーションのカスタマイズなし
「Run Pen」をクリックしてください。
画面内にはまだ何も見えてない状態ですので、 CODEPEN のスクロールバーをゆっくりスクロールしてみてください。
アニメーションの速度が少し速いのが気になりますが、これだけでも十分満足できそうです。
オプションは後述します。
See the Pen AOS_normal by blue moon (@blue-moon) on CodePen.
HTMLファイル
<head>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style.css"> <!-- ご自身のパスに変更 -->
</head>
<body>
<div class="container fade">
<div class="item" data-aos="fade-up">fade-up</div>
<div class="item" data-aos="fade-down">fade-down</div>
<div class="item" data-aos="fade-left">fade-left</div>
<div class="item" data-aos="fade-right">fade-right</div>
<div class="item" data-aos="fade-up-right">fade-up-right</div>
<div class="item" data-aos="fade-up-left">fade-up-left</div>
<div class="item" data-aos="fade-down-right">fade-down-right</div>
<div class="item" data-aos="fade-down-left">fade-down-left</div>
</div>
<div class="container flip">
<div class="item" data-aos="flip-up">flip-up</div>
<div class="item" data-aos="flip-down">flip-down</div>
<div class="item" data-aos="flip-left">flip-left</div>
<div class="item" data-aos="flip-right">flip-right</div>
</div>
<div class="container slide">
<div class="item" data-aos="slide-up">slide-up</div>
<div class="item" data-aos="slide-down">slide-down</div>
<div class="item" data-aos="slide-left">slide-left</div>
<div class="item" data-aos="slide-right">slide-right</div>
</div>
<div class="container zoom">
<div class="item" data-aos="zoom-in">zoom-in</div>
<div class="item" data-aos="zoom-in-up">zoom-in-up</div>
<div class="item" data-aos="zoom-in-down">zoom-in-down</div>
<div class="item" data-aos="zoom-in-left">zoom-in-left</div>
<div class="item" data-aos="zoom-in-right">zoom-in-right</div>
<div class="item" data-aos="zoom-out">zoom-out</div>
<div class="item" data-aos="zoom-out-up">zoom-out-up</div>
<div class="item" data-aos="zoom-out-down">zoom-out-down</div>
<div class="item" data-aos="zoom-out-left">zoom-out-left</div>
<div class="item" data-aos="zoom-out-right">zoom-out-right</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>CSS(SCSS)ファイル
body {
margin-top: 100vh;
.container {
margin: 30px auto;
width: 250px;
height: auto;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
background-color: #ccc;
.item {
margin: 15px;
padding: 5px;
width: 50px;
height: 50px;
text-align: center;
background-color: #000;
color: #fefefe;
font-size: 0.2em;
}
}
}オプション等
オプション追加方法
HTMLファイルのタグ内に追加していきます。
<!-- fade-inアニメーションにオプションでアニメーションにかける時間を設定する場合 -->
<div data-aos="fade-in" data-aos-duration="1000"></div>アニメーション・オプションの種類
| アニメーション・オプション | 内容 | 説明 |
| Animations （ Fade animations） | fade fade-up fade-down fade-left fade-right fade-up-right fade-up-left fade-down-right fade-down-left | アニメーション前は透明 透過度を1にしながらどの方向へ移動表示されるか fadeの場合は、移動距離なし ハイフンの後は移動方向を示す |
| Animations （ Flip animations） | flip-up flip-down flip-left flip-right | 回転しながら表示 flip-up は、要素の上側から表示されるように回転 flip-left は、反時計回りに回転し右側から表示 |
| Animations （ Slide animations） | slide-up slide-down slide-left slide-right | どの方向へ移動表示されるか fadeとの違いは、アニメーション前後の透過度の変化なし ハイフンの後は移動方向を示す |
| Animations （ Zoom animations） | zoom-in zoom-in-up zoom-in-down zoom-in-left zoom-in-right zoom-out zoom-out-up zoom-out-down zoom-out-left zoom-out-right | zoom-in-●●は、 大きくなりながら元の大きさに表示 zoom-out-●●は、小さくなりながら 元の大きさに 表示 in- 及び out- 以降は移動方向 を示す |
| Anchor placements | top-bottom top-center top-top center-bottom center-center center-top bottom-bottom bottom-center bottom-top | アニメーションの開始位置の指定 ハイフンの前は要素内の箇所 ハイフンの後は画面内の要素の位置 top-bottom は、要素のtopが画面の bottom に来た時にアニメーション発生 |
| Easing functions | linear ease ease-in ease-out ease-in-out ease-in-back ease-out-back ease-in-out-back ease-in-sine ease-out-sine ease-in-out-sine ease-in-quad ease-out-quad ease-in-out-quad ease-in-cubic ease-out-cubic ease-in-out-cubic ease-in-quart ease-out-quart ease-in-out-quart | イージングタイプを指定 linear：最初から最後まで一定の速度 ease：最初は中速、段々と 速度を落とす ease-in： 最初は低速、最後は高速 ease-out： 最初は高速 、段々と速度を落とす ease-in-out：最初は低速、途中は高速 、最後は低速 この後のハイフンの後の意味するところ backは、少し行き過ぎてから戻る sine、quad 、cubic 、quart の順にイージングタイプが強調 |
animation共通のデフォルトの速度・遅延・距離
| デフォルト値 | ||
| offset | アニメーション発生までの距離 変更はHTMLファイルタグで設定可 | 120px |
| delay | 50～3000ミリ秒の間で50ミリ秒間隔で設定可 変更はHTMLファイルタグで設定可 | 0 |
| duration | 50～3000ミリ秒の間で50ミリ秒間隔で設定可 変更はHTMLファイルタグで設定可 | 400 |
| distance | アニメーションする要素の移動距離 変更する場合は、ひと手間必要（後述） | 100px |
distance のデフォルト値を変更する場合
SCSSの場合に変更することが可能です。
しかし、少し面倒だと思われる方（筆者！）は次項に別の方法を記載しておりますので、先に進んでください。
①AOSをCDN読み込みではなく、AOS package を npm 又は yarn でインストールする必要があります。
下記は、公式ページより
import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();②SCSSの@importを使用し、下記を追記します。
$aos-distance: 50px; // 変更したい移動距離に変更
@import 'node_modules/aos/src/sass/aos.scss';distance のデフォルト値を要素毎に変更
筆者はdistanceのデフォルト値を変更するためだけにインストールするのは躊躇しました。
そこで、CSSで要素の元の位置を設定しておけばいいのでは？と思い立ち、実装に成功しました。
その例が下記です。
.item[data-aos="fade-up"] { // Y方向への移動が伴うfade-upアニメーションの場合
transform: translateY(50px); // ここで移動距離を設定
transition-property: transform, opacity;
opacity: 0;
&.aos-animate {
transform: translateY(0px); // アニメーション後は元の位置に戻す
opacity: 1;
}
}
.item[data-aos="fade-left"] { // X方向への移動が伴うfade-upアニメーションの場合
transform: translateX(400px); // ここで移動距離を設定
transition-property: transform, opacity;
opacity: 0;
&.aos-animate {
transform: translateX(0px); // アニメーション後は元の位置に戻す
opacity: 1;
}
}Anchorの使用方法
また、Anchorとなる要素が表示されたタイミングで表示させることも可能です。
起点に表示させたい要素にAnchorを、 data-aos-anchor=”#●●●”と指定
一方、Anchor となる要素には、id =”●●●” を付与
<div class="item-left" data-aos="fade-left" data-aos-anchor="#trigger-item-left"></div>
<div class="item" data-aos="flip-up" id="trigger-item-left">flip-up</div>CODEPEN でオプション等を追加し確認
以下の条件で確認してみます。
- CDN読み込み
- JSファイル使用
- HTMLファイルタグ内のオプション追加
- CSSでアニメーションのカスタマイズ
- Anchorを使用
画面内にはまだ何も見えてない状態ですので、CODEPENのスクロールバーをスクロールしてみてください。
See the Pen AOS_option by blue moon (@blue-moon) on CodePen.
HTMLファイル
<head>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style.css"> <!-- ご自身のパスに変更 -->
</head>
<body>
<!-- 以下の2つは、Anchor要素がtriggerとなる -->
<div class="item-left" data-aos="fade-left" data-aos-anchor="#trigger-item-left" data-aos-anchor-placement="bottom-bottom">fade-left ★flip-up</div>
<div class="item-right" data-aos="fade-right" data-aos-anchor="#trigger-item-right" data-aos-anchor-placement="top-center">fade-right ★slide-up</div>
<div class="container fade">
<div class="item" data-aos="fade-up">fade-up</div>
<div class="item" data-aos="fade-down" data-aos-easing="ease-in-out-quad">fade-down</div>
<div class="item" data-aos="fade-left" data-aos-duration="3000">fade-left</div>
<div class="item" data-aos="fade-right">fade-right</div>
<div class="item" data-aos="fade-up-left" data-aos-offset="200">fade-up-left</div>
<div class="item" data-aos="fade-up-right">fade-up-right</div>
<div class="item" data-aos="fade-down-left" data-aos-delay="3000">fade-down-left</div>
<div class="item" data-aos="fade-down-right">fade-down-right</div>
</div>
<div class="container flip">
<div class="item" data-aos="flip-up" id="trigger-item-left">flip-up</div>
<div class="item" data-aos="flip-down" data-aos-anchor-placement="top-center">flip-down</div>
<div class="item" data-aos="flip-left" data-aos-easing="ease-in-out">flip-left</div>
<div class="item" data-aos="flip-right">flip-right</div>
</div>
<div class="container slide">
<div class="item" data-aos="slide-up" id="trigger-item-right">slide-up</div>
<div class="item" data-aos="slide-down">slide-down</div>
<div class="item" data-aos="slide-left">slide-left</div>
<div class="item" data-aos="slide-right" data-aos-duration="200">slide-right</div>
</div>
<div class="container zoom">
<div class="item" data-aos="zoom-in">zoom-in</div>
<div class="item" data-aos="zoom-in-up">zoom-in-up</div>
<div class="item" data-aos="zoom-in-down">zoom-in-down</div>
<div class="item" data-aos="zoom-in-left">zoom-in-left</div>
<div class="item" data-aos="zoom-in-right">zoom-in-right</div>
<div class="item" data-aos="zoom-out">zoom-out</div>
<div class="item" data-aos="zoom-out-up">zoom-out-up</div>
<div class="item" data-aos="zoom-out-down">zoom-out-down</div>
<div class="item" data-aos="zoom-out-left">zoom-out-left</div>
<div class="item" data-aos="zoom-out-right">zoom-out-right</div>
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script src="main.js"></script> <!-- ご自身のパスに変更 -->
</body>CSS(SCSS)ファイル
body {
margin-top: 100vh;
.item-left,
.item-right {
padding: 5px;
width: 50px;
height: 50px;
position: fixed;
top: 60px;
text-align: center;
background-color: #666;
color: #fefefe;
font-size: 0.5rem;
}
.item-left {
left: 60px;
}
.item-right {
right: 60px;
}
.container {
margin: 30px auto;
width: 180px;
height: auto;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
background-color: #ccc;
.item {
margin: 15px;
padding: 5px;
width: 50px;
height: 50px;
text-align: center;
background-color: #000;
color: #fefefe;
font-size: 0.5rem;
}
.item[data-aos="zoom-in"] {
transition-duration: 3000ms;
transform: rotate(0deg);
opacity: 0;
transition-property: transform, opacity;
&.aos-animate {
transform: rotate(360deg);
opacity: 1;
}
}
.item[data-aos="zoom-in-up"] {
background-color: #4242ff;
transition-property: background;
&.aos-animate {
background-color: #ff42a0;
}
}
.item[data-aos="zoom-in-down"] {
background-color: #ff42a0;
transition-property: background;
&.aos-animate {
background-color: #4242ff;
}
}
.item[data-aos="zoom-out-left"] {
transition-duration: 3000ms;
border-radius: 0px;
opacity: 0;
transition-property: border-radius, opacity;
&.aos-animate {
border-radius: 50%;
opacity: 1;
}
}
.item[data-aos="zoom-out-right"] {
transform: skewX(30deg);
transition-property: transform;
&.aos-animate {
transform: skewX(0deg);
}
}
}
}JSファイル
ここで、一括でデフォルト値を変更しています。
なお、HTMLファイルタグでも上書き可能です。
AOS.init({
offset: 50,
delay: 50,
duration: 1000,
});まとめ
もちろん、デフォルトのアニメーションでも十分満足できます（個人的にはアニメーションにかける時間durationを除いては）。
オプションはHTMLタグ内に記述し、CSSでさらにカスタマイズできますので、一通り使用方法をマスターすれば、柔軟なアニメーションを実現できそうなのでお薦めです。