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>

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

個別ではなく共通でオプションを設定することもできます。
共通で設定する場合は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);

全体設定のデモページ

【参考サイト】

• GitHub – michalsnik/aos: Animate on scroll library