サイト制作に関するメモ書き

HOME > HTML・CSS > AOSを使ってみる

AOSを使ってみる

スクロールで要素をアニメーション表示させるプラグイン「AOS」を使ってみます。
jQueryなどは使用していないので、単体で使えます。

使い方

下記からダウンロードできます。
GitHub – michalsnik/aos: Animate on scroll library

HTML内に必要なファイルを読み込みます。

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

CDNも用意されているようなので、こちらでも問題ありません。

<link href="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.css">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.js"></script>

アニメーションさせる要素にdata-aosでアニメーションを指定します。

HTML

<div class="sample" data-aos="fade-up">
	<img src="img01.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="fade-down">
	<img src="img02.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="fade-right">
	<img src="img03.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="fade-left">
	<img src="img04.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="flip-right">
	<img src="img05.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="flip-left">
	<img src="img06.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="slide-right">
	<img src="img07.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="slide-left">
	<img src="img08.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in">
	<img src="img09.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-out">
	<img src="img10.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in-right">
	<img src="img01.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in-left">
	<img src="img12.jpg" width="480" height="360" alt="">
</div>

AOSの初期化を行います。

JavaScript

AOS.init();

AOSのデモページ
設定できるアニメーションについて、詳しくは公式のドキュメントをご確認ください。
 

オプション

各設定の詳細は公式のドキュメントにありますのでご確認ください。

オプションはHTML要素にdata属性で設定できます。

HTML

<div class="sample" data-aos="zoom-in">
	<img src="img01.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in" data-aos-offset="300">
	<img src="img02.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in">
	<img src="img03.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in" data-aos-duration="1000">
	<img src="img04.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in">
	<img src="img05.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in" data-aos-easing="ease-in-sine">
	<img src="img06.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in">
	<img src="img07.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in" data-aos-delay="400">
	<img src="img08.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in">
	<img src="img09.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in" data-aos-anchor=".anchor">
	<img src="img10.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in">
	<img src="img11.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in" data-aos-anchor-placement="top-top">
	<img src="img12.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in">
	<img src="img13.jpg" width="480" height="360" alt="">
</div>
<div class="sample" data-aos="zoom-in" data-aos-once="true">
	<img src="img14.jpg" width="480" height="360" alt="">
</div>

オプション設定のデモページ

data-aos-offset アニメーションを開始するスクロール位置の設定。
初期値は120
data-aos-duration アニメーションの時間を設定。
初期値は400
data-aos-easing イージングの設定。
初期値はease。
data-aos-delay アニメーションの遅延の設定。
初期値は0。
data-aos-anchor アニメーション開始するスクロール位置を他の要素で設定。
初期値はnull。
data-aos-anchor-placement アニメーション開始のトリガーになるスクロールの位置を設定。
初期値はtop-bottom。
data-aos-once アニメーションが1回だけ実行されるように設定。
初期値はfalse。

個別ではなく共通でオプションを設定することもできます。
共通で設定する場合はJavaScriptで設定します。

HTML

<div class="contents">
	<div class="sample" data-aos="fade-up">
		<img src="img01.jpg" width="480" height="360" alt="">
	</div>
	<div class="sample" data-aos="fade-down">
		<img src="img02.jpg" width="480" height="360" alt="">
	</div>
</div>
<button id="disable">無効化</button>

JavaScript

AOS.init({
	offset: 300,
	duration: 1000,
	easing: 'ease-in-sine',
	delay: 400,
	startEvent: 'resize'
});

var disable = document.getElementById('disable');
disable.addEventListener('click', function() {
	AOS.init({
		disable: true
	});
}, false);

全体設定のデモページ

disable AOSを無効にする必要がある場合に設定。
初期値はfalse。
startEvent AOSが初期化されるイベント名を設定。
初期値はDOMContentLoaded。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP