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

2019.01.25　Posted by Coding_team

Webプログラミング

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

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

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

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

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

→「AOS」配布元

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

■必要なファイル

aos-master/dist/aos.js
aos-master/dist/aos.css

1 2	aos-master/dist/aos.js aos-master/dist/aos.css

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

■HTML<head>内

<link rel="stylesheet" href="css/aos.css">

1	<link rel="stylesheet" href="css/aos.css">

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

■HTML</body>上

<script src="js/aos.js"></script>
<script>
	AOS.init(); //AOSの実行に必要
</script>

AOS.init(); //AOSの実行に必要

</script>

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

■HTML<body>内

<div data-aos="fade-up">動かしたい要素</div>

1	<div data-aos="fade-up">動かしたい要素</div>

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

■細かな設定の記述例

<div
	data-aos="fade-up" //アニメーションの種類
	data-aos-offset="200" //アニメーションさせる要素からトリガーとする位置（px） 
	data-aos-delay="50" // アニメーション開始までの時間、0msから3000msまで(50msごと指定可能) 
	data-aos-duration="1000" // アニメーションにかける時間、0msから3000msまで(50msごと指定可能) 
	data-aos-easing="ease-in-out" // アニメーションのeasing
	data-aos-mirror="true" //アニメーションを一度だけにするか
	data-aos-once="false" //スクロールしながらアニメーションするかどうか
	data-aos-anchor=".other-element" //アニメーションのトリガーにする要素を指定
	data-aos-anchor-placement="top-center" //要素がウィンドウのどの位置でアニメーションするか
>
</div>

<div

data-aos="fade-up" //アニメーションの種類

data-aos-offset="200" //アニメーションさせる要素からトリガーとする位置（px）

data-aos-delay="50" // アニメーション開始までの時間、0msから3000msまで(50msごと指定可能)

data-aos-duration="1000" // アニメーションにかける時間、0msから3000msまで(50msごと指定可能)

data-aos-easing="ease-in-out" // アニメーションのeasing

data-aos-mirror="true" //アニメーションを一度だけにするか

data-aos-once="false" //スクロールしながらアニメーションするかどうか

data-aos-anchor=".other-element" //アニメーションのトリガーにする要素を指定

data-aos-anchor-placement="top-center" //要素がウィンドウのどの位置でアニメーションするか

</div>

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

→DEMOはこちら

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

→「AOS」配布元

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

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