サイトへ Github
Webサイトで画面をスクロールすると、要素がフェード等のエフェクトがかかって出てくることがありますよね。
jQueryを使うことが主だと思うのですが、『AOS』を使うとjQuery不要で実装ができます。
AOSの使い方
とりあえずサイトからcssとjsをダウンロード、またはCDNでも配布されているのでそちらを読み込みます。CSSの読み込み
|
1 2 3 |
<head> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css"> </head> |
jsの読み込み
|
1 2 3 4 5 6 7 |
<body> ～HTML等の記述～ <script src="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script> <script> AOS.init(); </script> </body> |
CSSはhead内に、jsはbody内で読み込ませてください。
あとは読み込ませた後ろにAOS.init()の記述をして初期化、使用することができます。
HTML
|
1 2 3 4 5 6 7 8 |
<div data-aos="fade-in" class="box left" data-aos-delay="100" data-aos-duration="200">fade-up</div> <div class="clear"></div> <div data-aos="fade-down" class="box right" data-aos-delay="200">fade-down</div> <div class="clear"></div> <div data-aos="fade-right" class="box left" data-aos-delay="300" data-aos-duration="300">fade-right</div> <div class="clear"></div> <div data-aos="fade-left" class="box right" data-aos-delay="400">fade-left</div> </div> |
HTMLの記述はこのようになります。
要素に対して『data-aos=』を使いアニメーションを指定します。
アニメーションはサイトを参考にしてください。十分な量のアニメーションが用意されています。
上記のもので作ったデモはこちらです。
DEMO
その他にもオプションが用意されていますので、必要に応じて指定していきます。
| 属性 | 使い方 | デフォルト |
|---|---|---|
data-aos-offset |
開始位置の設定（px単位） | 120 |
data-aos-duration |
アニメーションの長さ（ミリ妙単位） | 400 |
data-aos-easing |
アニメーションの仕方（ease-in-sine等） | ease |
data-aos-delay |
アニメーションのタイミングを遅らせる秒数（ミリ妙単位） | 0 |
data-aos-anchor |
開始位置を他の要素にするか | null |
data-aos-anchor-placement |
アニメーション開始位置の調整 | top-bottom |
data-aos-once |
アニメーションを1回だけにするか | false |
まとめると大体こんな感じになります。
|
1 2 3 |
<div data-aos="fade-right" data-aos-offset="300" data-aos-duration="500" data-aos-easing="ease-in-sine" data-aos-delay="300" data-aos-once="true"> オプションの指定 </div> |
1個1個指定しないでまとめたい場合は、js部分の記述を変更します。
|
1 2 3 4 5 |
AOS.init({ offset: 300, duration: 500, delay: 300, }); |
とても軽く、最初から様々なアニメーションやオプションが用意されているため使いやすい『AOS』
アニメーションが必要な際はぜひ導入してみてください。
