スクロール時のアニメーションを簡単実装「AOS」の使い方【jQuery不要】

2018年4月14日 2019年6月3日 WEB ,

AOSは、jQuery不要で動くスクロールアクション系javascriptプラグインです。
スクロールでHTML要素がウィンドウ内に入ると、フェードインして現れるエフェクトを実現できます。

jQuery不要でしかも動作が軽いので、とても使いやすいです。
ページ速度を重視しながらアニメーションを実装したい場合に、ぜひとも採用したいJSです。

そんなAOSの使い方を、解りやすく説明していきたいと思います!

AOSデモ

各種セッティングを施したデモページを作成しました。
設定のちょっとした説明も入れてAOSを実装していますので、ご参考までにどうぞ!

AOSのデモページ

AOSの使用例

AOSを使ったアニメーションの実装事例です。
先日ツイッターで流れてきて衝撃を受けたやつw
http://www.crazycrypto.info/entry/crypto-currency-girls-kari

工夫をすれば、これだけ凝ったアニメーション演出ができるんですね。

AOSの使い方

JSファイルのダウンロードと読み込み

https://michalsnik.github.io/aos/

ページの下の方にダウンロードリンクがあります。
ダウンロードしたcssとjsファイルをそれぞれ所定の場所で読み込みます。

CDNでも提供されているので、お好きな方を選んでください。

<head>
  ...

  <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
</head>
<body>
  ...

  <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

AOSのアニメーション設定方法

AOSを実行するjsを書きます。
基本的にはたったこの1行でOK!

<script>
    AOS.init();
</script>

オプションを設定することで、デフォルト値を設定することができます。
詳しくは、Initialize AOS をご参考ください。

アニメーションさせたい要素に、data-aos属性を加えます。

<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine"></div>

data-aos属性の値には「アニメーション名」が入ります。

data-aos属性の値一覧

フェード系

fade fade-up fade-down fade-left fade-right
fade-up-right fade-up-left fade-down-right fade-down-left

フリップ系

flip-up flip-down flip-left flip-right

スライド系

slide-up slide-down slide-left slide-right

ズーム系

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

オプション属性一覧と各種説明

トリガーやタイミングの調整など設定する各種data属性があります。
それぞれの説明は次の表にまとめました。

属性名概要入力例デフォルト値
data-aos-offset要素から見た位置にトリガーを指定(px)します。200120
data-aos-durationアニメーション時間をミリ秒単位で指定します。600400
data-aos-easingeasingを指定します。ease-in-sineease
data-aos-delayアニメーションをミリ秒単位で遅らせます。3000
data-aos-anchor指定した要素がトリガーになります。#selectornull
data-aos-anchor-placement“要素の位置-ウィンドウ位置”がトリガーになります。top-centertop-bottom
data-aos-onceアニメーションを1回のみにする場合trueを指定します。truefalse

data-aos-anchordata-aos-anchor-placementの2つは、少し分かり辛いので図解と一緒に詳しく説明します。

data-aos-anchor

デフォルトでは、data-aosを加えたHTML要素がウィンドウ内に入った時に動く設定になっています。

data-aos-anchorは、指定したセレクタをトリガーにしてアニメーションが始まります。

data-aos-anchor-placement

data-aos-anchor-placementでは、トリガーの位置を細かく指定できます。

デフォルトの値は「top-bottom」となっており「HTML要素のtopがウィンドウのbottom」を過ぎたらトリガーという意味になります。
「data-aos-anchor-placement=”要素の位置-ウィンドウ位置”」という書き方になります。

data-aos-anchor-placement="center-center"の場合は、この図のようになります。

data-aos-anchor-placement属性の値一覧

  • top-bottom
  • top-center
  • top-top
  • center-bottom
  • center-center
  • center-top
  • bottom-bottom
  • bottom-center
  • bottom-top

data-aos-easing属性の値一覧

data-aos-easingに入れる値は下記の通りです。

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-back
  • ease-out-back
  • ease-in-out-back
  • ease-in-sine
  • ease-out-sine
  • ease-in-out-sine
  • ease-in-quad
  • ease-out-quad
  • ease-in-out-quad
  • ease-in-cubic
  • ease-out-cubic
  • ease-in-out-cubic
  • ease-in-quart
  • ease-out-quart
  • ease-in-out-quart

 

いかがでしたでしょうか?
なるべく解りやすくAOSの使い方を紹介してきました。

スクロールアクション系のJSの中でも、とにかく動作が軽いので個人的にとても気に入っています。

AOSを使ってこれからどんなページを作ろうか、色々考えていきたいと思いまーす。

合わせて読んでほしい記事

Animate.cssでhover,click,scrollなどイベントでアニメーション処理する応用テクニック

この記事へのコメント

    お気軽にコメントをどうぞ。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    このサイトの管理者

    ナオユ

    Wordpress初心者向けにカスタマイズ方法やWEB制作のノウハウをポロッとまとめています。広告代理店→WEB制作会社→リモート勤務になり在宅ワークしながらアフィリエイトなど副業に挑戦中|子ども大好き新米パパ@H29男児|フラット35で実家を建て直し親と同居|仮想通貨投資(絶賛含み損w)