Cntlog > スキルアップ・ノウハウ > JavaScript・jQuery > 簡単にスクロールアニメーションが設定できるAOS(jQuery不要)

簡単にスクロールアニメーションが設定できるAOS(jQuery不要)

最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。

一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。

今回はJSをほぼ書かずに簡単にスクロールアニメーションが設定できる「AOS(Animate On Scroll Library」をご紹介します。

まずは試しに実装してみたサンプルをご覧ください。

サンプルページ

AOSとは

AOSはAnimate On Scroll Libraryの略です。

公式サイト
github
公式デモサイト

AOSで出来ること

要素を表示させるアニメーションは「Fade」「Flip」「slide」「Zoom」の4種類が用意されています。

これらにタイミングや速度、上下左右の位置、回転の方向を指定できるのでかかなり自由度が高いです。

jQuery不要で動くのですでにコーディング済みのページに依存せずにお手軽に追加できます。

使い方

下記の手順で読込と設定は完了です。

  1. 配布されているJSファイルとCSSファイルの2つを読み込み
  2. JSの実行
  3. 特定の要素に『data-aos』属性を指定する

読み込み方法

githubからでもDownloadできますが、CDNでも配布されていますのでそちらを使うのをオススメします。

<!--「aos」CSSの読込-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">

<!--「aos」JSの読込-->
<script src="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>

実行方法

さらにJSファイルを読み込んだ直後に<script>AOS.init();</script>と記述してAOSを機能させます。

オプションを設定することも可能です。
ここで設定全体共通の設定をしておくと個別にアニメーションスピードを調整する手間が省けます。

<script>
  AOS.init({
    offset: 200,
    duration: 600,
    easing: 'ease-in-sine',
    delay: 100,
  });
 </script>

さらにAOSでは実行を無効化する端末もオプションで選べます。
これはスマホ版ではアニメーションさせたくないなどのときには便利です。
設定は3つのパターン(mobile(phone & tablet)、phone、tabletの3種類)で選べます。

<script>
  AOS.init({
    disable: 'mobile'
  });
</script>

端末だけではなく、画像の幅でも設定可能です。

<script>
  AOS.init({
    disable: window.innerWidth < 1024
  });
</script>

エフェクトのマークアップ

例えば「フェード・イン」しながら表示させたい場合は次のように記述します。

<div data-aos="fade-in">アニメーションさせたいコンテンツ</div>
何をしているかというとHTMLタグにカスタム属性であるdata-aosを設定しています。
これだけで設定完了です。

もちろんフェードイン以外にも様々なエフェクトが設定できます。
指定できるエフェクトは以下のとおりです。

フェード関連の設定

  • Fade animations
  • fade-in
  • 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

その他の設定

AOSではアニメーション以外にも、要素を表示させるタイミングや動かす距離、アンカーポイント、アニメーションの回数など、各種オプションも指定できます。

これらもアニメーション同様にカスタムデータ属性で指定するだけです。

  • data-aos-offset
  • data-aos-duration
  • data-aos-easing
  • data-aos-delay
  • data-aos-anchor
  • data-aos-anchor-placement
  • data-aos-once

参考

複数指定する場合は以下のようになります。

<div data-aos="fade-in" data-aos-easing="ease-in-sine" data-aos-once="true">アニメーションさせたいコンテンツ</div>

詳しくはGitHubで紹介されていますのでご確認ください。

関連記事

【JavaScript】PCサイトかスマートフォンサイトを選択させるスクリプト... PC向けサイトにアクセスした際にスマートフォン向けサイトを表示するか選択してもらうスクリプトを書きました。 今回はJavaScriptで作っています。 //iPhone、iPad、AndroidのURLをリダイレクト(選択)させる $(function(){ ...
初めてjQueryプラグインを作ってみた(RSS取得)... 最近社内でJSを書く機会が増えてきたので、他の人にも扱いやすいようにと思ってjQueryプラグインにする事を思いつきました。 作ったプラグインの内容はRSSを取得・表示させるためのjqueryプラグインです。 「WordPressならそんなのデフォルトで入ってるやん…」って思ったくら...