はじめに

今回は、AOS.jsの紹介です。

こちらの作者も言ってますが・・・WOWJSと同様の機能です。

異なる部分としては、jQueryを使用しておらず。Javascriptのみで実装されています。

AOS.js

https://github.com/michalsnik/aos/tree/v2

上記からダウンロードしてきて、aos/dist/の中の下記を呼び出します。

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

scriptの初期化

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

効果の設定

使用したいブロックタグに「data-aos」の要素を追加します。

その値にアニメーション効果の名称を設定するだけです。

<div data-aos="animation_name">

使用できるアニメーション効果の名称一覧

サンプル

https://michalsnik.github.io/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

アンカーの配置:

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

イージング機能:

これらのタイミング関数のいずれかを選択して、要素をうまくアニメーション化できます。:

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

詳細設定

これらの設定は、特定の要素で設定することも、スクリプトの初期化中にデフォルトとして設定することもできます

(部分のないオプションオブジェクト内)。data-

*Durationは50から3000までの値を受け入れ、ステップ50msで、アニメーションの持続時間がcssによって処理され、cssをすでに長くしないようにするためです。これはほとんどすべての場合に良いはずだと思います。

そうでない場合は、ページに単純なCSSを記述して、利用可能な別の期間オプション値を追加することができます。

  body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
    transition-duration: 4000ms;
  }

このコードは、AOS要素に設定したり、AOSスクリプトの初期化中にグローバル期間として設定したりするために、4000ミリ秒の期間を追加します。

ダブルに注意してください-それは間違いではなく、そこに醜い「!important」を書く必要なしに、個々の設定をグローバルよりも重要にするためのトリックです:)[data-aos][data-aos]

data-aos-anchor-placement- あなたは各要素に異なる配置オプションを設定することができます、原則は非常に単純です、各アンカー配置オプションには2つの単語が含まれています。これは、要素の要素がウィンドウに到達したときにアニメーションがトリガーされることを意味します。 は、要素がウィンドウに到達したときにアニメーションがトリガーされることを意味します。 以下に、すべてのアンカー配置オプションのリストがあります。top-centertopcenterbottom-topbottomtop

例：

  <div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">
  <div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector">
  <div data-aos="fade-up" data-aos-anchor-placement="top-center">

API

AOSオブジェクトはグローバル変数として公開されていますが、現時点では次の3つの方法を使用できます。

init - AOS を初期化する

refresh - 要素のすべてのオフセットと位置を再計算します(ウィンドウのサイズ変更時に呼び出されます)

refreshHard - AOS要素とトリガーを持つ配列のreinit(要素に関連するDOM変更時に呼び出される)refresh aos

実行例:

 AOS.refresh();

既定では、AOS は DOM の変更を監視しており、非同期的に読み込まれた新しい要素がある場合、または DOM から何かが削除されると、自動的に呼び出されます。IEのようにサポートされていないブラウザでは、自分で呼び出す必要があるかもしれません。refreshHardMutationObserverAOS.refreshHard()

refreshメソッドは、AOS要素を使用して新しいストアを構築する必要がなく、できるだけ軽くする必要があるため、ウィンドウのサイズ変更などで呼び出されます。

グローバル設定

各要素の設定を別々に変更したくない場合は、グローバルに変更できます。

これを行うには、次のようにオプションオブジェクトを関数に渡します。init()

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

追加構成

これらの設定は、AOSの初期化中にオプションオブジェクトでのみ設定できます。

AOSの無効化

特定のデバイスまたは任意のステートメントでAOSを無効にする場合は、オプションを設定できます。そのように:disable

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

AOSをプロジェクトに完全に適合させるために使用できるいくつかのオプションがあり、3つのデバイスタイプのいずれかを渡すことができます:(携帯とタブレット)、または。これにより、これらの特定のデバイスでAOSが無効になります。

しかし、独自の条件を作成したい場合は、デバイスタイプ名の代わりにステートメントを単純に入力します。mobile phone tablet

  disable: window.innerWidth < 1024

関数にした場合return または :function true false を返す必要があります。

  disable: function () {
    var maxWidth = 1024;
    return window.innerWidth < maxWidth;
  }

開始イベント

イベントでAOSを初期化したくない場合は、独自のイベント名を渡して、いつでもトリガーできます。AOS は要素でこのイベントをリッスンしています。DOMContentLoadeddocument

  <script>
    AOS.init({
      startEvent: 'someCoolEvent'
    });
  </script>

重要な注意:設定すると、代わりにイベントリスナーが追加されます。startEvent: 'load'windowdocument

さいごに

機械語翻訳・・・なので・・