東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2019.01.25 Posted by

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

今回は、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」配布元

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

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278