スクロールアニメーションが簡単に実装出来るjavascriptライブラリ「aos」の紹介です。

Webページを下にスクロールした時に、エフェクトと共に要素が現れるアニメーションを見たことがありませんか? そういうエフェクトは、eコマースやファッション系のWebページで、アイテムの画像を表示させる時に使われている印象があります。

一般的に そのようなエフェクトを実装するにはjQuery等を使ってimgタグやタグの'class'に紐付けて処理を書いたりするのですが、javascript + 専用のライブラリの知識が無いと、実装が少々面倒です。

そんなスクロール アニメーションを簡単に実装出来るライブラリが「aos」です。

"aos"の公式ページのデモ 


aosを使うと ホボほぼjavascriptの処理を書く必要なしに、上のGIFのようなスクロールアニメーションを使うことが出来ます。


aosの導入 〜 使い方

aosの導入には公式ページから入手する方法、"bower" 又は "npm" に対応しています。
( *公式ページから入手する場合、ダウンロードボタンはページの最下部にあります )

# bowerを使って導入する場合
bower install aos --save

# npmを使って導入する場合
npm install aos --save

導入し終えると、cssとjavascriptファイルをhtml上で読み込みます。

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

<!-- javascript -->
<script src="/aos/dist/aos.js"></script>


aosの使い方は至って簡単で、javascriptの初期化処理を書いて、アニメーションを加えたいDOM要素に"data-aos"要素を追加するだけです。
( * 初期化さへ済めばjavascripを記述すれば、その後の処理はhtmlのタグ上に定義していきます )

<!-- アニメーションを付けたい要素にdata-aos属性を付けると適応されます -->
<!-- <div data-aos="アニメーション名"> -->

<!-- 下のようにすると要素が反転されたアニメーションが表示されます -->
<div data-aos="flip-left"></div>

<script>
// aosの初期化
AOS.init();

// オプションも追加出来ます
/*
 AOS.init({
        easing: 'ease-out-back',
        duration: 1000
        });
*/
</script>


aosには四種類のアニメーションが用意されおり、'zoom-down', 'zoom-left'のように上下左右のアクションも用意されています。

- Fade ( 浮かび上がるエフェクト )
- Flip ( 反転するエフェクト )
- Slide ( スライドするエフェクト * 要素が覆いかぶさっているようなエフェクトで面白いです )
- Zoom ( ズームエフェクト )

# 用意されているアニメーション

# 使い方
# data-aos="fade-left"

## Fade アニメーション:
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

## Flip アニメーション:
flip-up
flip-down
flip-left
flip-right

## Slide アニメーション:
slide-up
slide-down
slide-left
slide-right

#Zoom アニメーション:
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

自身の環境でテストしましたが、bootstrapと一緒に使っても問題なさそうです


Summary

以上がaosの紹介でした。

上では紹介していませんが、アニメーションを表示させるタイミングを調節する"Easing functions"、アニメーションを表示させておく場所を指定する"Anchor placement"オプションも用意されています。

javascriptが苦手な人でも十分に使いこなせるライブラリなので、気になった人はゼヒ×2チェックしてください!

Githubページ: michalsnik / aos
 

公式のデモページ: AOS - Animate on scroll library

 

この記事のカテゴリ

プログラミング

この記事のタグ

jsライブラリー , Webデザイン

Socialシェアボタン

スポンサーリンク