CSS初心者にも簡単に使える！スクロールに連動するさまざまなエフェクトを実装できるスクリプト -AOS
Post on:2016年6月7日
sponsors
スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できるスクリプトを紹介します。
jQueryは不要で、非常に軽量のライブラリです。
実装は簡単で、外部ファイルを2行記述して、classを与えるだけ。
AOS - Animate on scroll library
AOS -GitHub
AOSのデモ
デモでは、スクロールに連動したさまざまなエフェクトを楽しめます。
デモページ: Fade
デモページ: Flip
デモページ: Zoom
デモページ: 個別設定
デモページ: トリガーとなる要素を別に指定
AOSの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
cssもjsファイルもCDNで提供されています。
|
1 2 3 4 5 6 7 8 |
<head> ... <link href="https://cdn.rawgit.com/michalsnik/aos/1.0.1/dist/aos.css"> </head> <body> ... <script src="https://cdn.rawgit.com/michalsnik/aos/1.0.1/dist/aos.js"> </body> |
Step 2: JavaScript
スクリプトを初期化します。
|
1 2 3 |
<script> AOS.init(); </script> |
HTML
あとは、各要素にclassでアニメーションを設定するだけです。
フェードの指定は、「.fade-up」をつけるだけ。
|
1 |
<div aos="fade-up"></div> |
複数の設定をすることもできます。
|
1 |
<div aos="fade-zoom-in" aos-offset="200" aos-easing="ease-in-sine" aos-duration="600"> |
sponsors
