ウィンドウをスクロールさせると要素がフェードインしながら表示されるスクリプト[AOS(Animate On Scroll Library)]の使い方を紹介します。
まずは試しに実装してみたサンプルをご覧ください。
要素を表示させる際の動きは「Fade」「Flip」「Zoom」の3種類が用意されています。
ここにタイミングや速度、上下左右の動きや回転の向きを指定できるので、実際にはかなり多くのカスタマイズが可能です。
jQuery不要で動くのも嬉しいですね。
配布されているJSファイルとCSSファイルの2つを読み込み、特定の要素に『data-aos』属性を指定するだけで動きます。
各ファイルのダウンロードは以下より。
AOS(Animate On Scroll Library)の導入方法
まずはJSとCSS各ファイルを読み込みますが、両方ともCDNで配信されています。
手っ取り早く使いたいのでこれを利用しましょう。
<head> ... <link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/1.0.1/dist/aos.css"> </head> <body> ... <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script> <script>AOS.init();</script> </body>
上記のようにCSSファイルは<head>〜</head>
内に、JSファイルは<body>〜</body>
内に挿入します。
さらにJSファイルを読み込んだ直後に<script>AOS.init();</script>
と記述してAOSを機能させます。
ここまで済ませてしまえば既に準備は終了。
あとはエフェクトを効かせたい要素にマークアップしていくだけです。
AOS(Animate On Scroll Library)を効かせたい要素をマークアップする。
例えば「フェード・イン」しながら表示させたい場合は次のように記述します。
<div data-aos="fade-in">コンテンツ</div>
カスタム属性『data-aos』で指定するだけなので簡単ですね。
この他に指定できるエフェクトは以下のとおりです。
- Fade animations
- fade-in
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left - Flip animations
- flip-up
flip-down
flip-left
flip-right - Slide animations
- slide-up
slide-down
slide-left
slide-right - 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
概ね必要とされるエフェクトはすべて網羅している印象です。素晴らしいですね。
その他のセッティング
AOSでは要素を表示させるタイミングや動かす距離、アンカーポイントなど、各種オプションも指定できます。
もちろん、これらもカスタムデータ属性で指定するだけなので非常に簡単です。
- data-aos-offset
- data-aos-duration
- data-aos-easing
- data-aos-delay
- data-aos-anchor
- data-aos-anchor-placement
- data-aos-once
複数指定する場合は以下のようになります。
<div data-aos="fade-in" data-aos-easing="ease-in-sine" data-aos-once="true">コンテンツ</div>
さらに詳しくはGitHubで紹介されていますのでご確認ください。
GitHub : https://github.com/michalsnik/aos