誰でも簡単に使えるスクロールに連動するエフェクト「AOS」

こんにちは、ウェブラボクリエイターズメモです。

今回は、HTML、CSS、jacascriptに関する知識がほとんど無くても簡単にスクロールに連動したエフェクトを実装できてしまう「AOS」を紹介したいと思います。

「AOS」はjQueryが不要なjavascriptのプラグインで非常に軽量であり、多機能です。

導入もとても簡単なので、「エフェクトをいちいち作るの面倒・・・」といった人にも役立つでしょう。

では早速実装していきます。まずは以下の配布元のページ最下部にあるDownloadボタンからファイル一式をダウンロードしてきます。

「AOS」配布元

ダウンロードしたファイルを解凍します。以下の2ファイルが必要となります。

■必要なファイル


これらのファイルを任意の場所に設置し読み込みます。

■HTML<head>内


AOSの実行に必要な記述もします。

■HTML</body>上


次に、動かしたい要素に以下のようにdata-aos属性を追加します。

■HTML<body>内


必要に応じてdata-aos-***属性で細かな設定が出来ます。以下のものが利用できます。

■細かな設定の記述例


説明は以上になります。試しにいくつかDEMOを作ってみました。

DEMOはこちら

配布元のページにもたくさんDEMOがあるので参考にするといいでしょう。

「AOS」配布元

動かしたい要素に属性に少し記述するだけでこれだけのエフェクトを実装できます。とてもお手軽なプラグインだと思うので是非オススメしたいと思います。

以上、クリエイターズメモでした。

  • このページを共有する