AOSを使ったアニメーションでNext.jsページをいい感じにする

11858 ワード
next.js animation AOS animation テキストリンク

AOSを使ったアニメーションでページをリッチな感じにする

ページになぁ〜んか物足りなさを感じる...
ちょっとしたアニメーションを入れたいなぁ...
でも自分でCSSとか書くのは流石にめんどくさい...
そこで、AOSというAnimate On Scroll Libraryを使ってアニメーションを設定することに。

導入

パッケージマネージャー、またはscriptタグで読み込んで使います。
以下それぞれの手順。

  • パッケージマネージャーの場合
yarn add aos@next

or

npm install --save aos@next

AOS.init()は、SSR関連の理由からuseEffectにラップする形で記述します。
_app.jsに以下を追加してください。

_app.js
import React from 'react'
import '../styles/globals.css'
import AOS from 'aos'; // 追加
import 'aos/dist/aos.css';  // 追加

function MyApp({ Component, pageProps }) {
  React.useEffect(() => {  // 追加
    AOS.init();
  },[]);

  return <Component {...pageProps} />
}

export default MyApp
  • scriptタグを使う場合
index.js
<Head>
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> {/*追加*/}
</Head>

公式ではbodyの閉じタグの直前に以下のコードを追加するように、とあります。

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init();
</script>

しかしNext.jsはデフォルトのファイル構成ではbodyタグをカスタマイズすることはできないので、
/pages/配下に_document.jsというファイルを定義し、そこに記述します。

_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
          <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <!--ここから追加-->
          <script>
            AOS.init();
          </script>
        </body>
      </Html>
    )
  }
}

export default MyDocument

とりあえず使ってみる

導入が完了したのでとりあえず動かしてみましょう。
アニメーションさせたい要素に対してdata-aos属性でアニメーション名を指定します

<div data-aos="fade-in"></div>

こんな感じです。

か、かんたんすぎる...!

カスタマイズ

ここまででアニメーションの適用は出来ました。
次はアニメーションの速度などカスタマイズしていきます。
デフォルトの設定は以下のようになっているようです。

AOS.init();

AOS.init({
  // Global settings:
  disable: false, // 以下の値を受け入れます。phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // AOSが初期化すべき、ドキュメントにディスパッチされたイベントの名前
  initClassName: 'aos-init', // 初期化後に適用されるクラス
  animatedClassName: 'aos-animate', // アニメーションに適用されるクラス
  useClassNames: false, // trueの場合、スクロール時に `data-aos` のコンテンツをクラスとして追加します。
  disableMutationObserver: false, // 変異の自動検出を無効にする（上級者向け)
  debounceDelay: 50, // ウィンドウのサイズ変更時に使用するデバウンスの遅延時間（上級者向け)
  throttleDelay: 99, // ページをスクロールする際のスロットルの遅延時間 (上級者向け)


  // `data-aos-*` 属性で要素ごとにオーバーライドできる設定です。
  offset: 120, // 元のトリガーポイントからのオフセット(px単位)
  delay: 0, // 0から3000までの値を、50msステップで設定
  duration: 400, // 0～3000の値を、50msステップで設定
  easing: 'ease', // AOSアニメーションのデフォルトイージング
  once: false, // - スクロールダウン中に、アニメーションを一度だけ行うかどうか 
  mirror: false, // スクロール中に要素をアニメーションさせるかどうか
  anchorPlacement: 'top-bottom', // ウィンドウに対する要素のどの位置がアニメーションのトリガーとなるかを定義します。
});

よくわからないとこもいくつかあるんですが...。

これらのパラメータをdata-aos-***属性を用いてカスタマイズしていきます。

<div
  data-aos="fade-up"
  data-aos-delay="50" アニメーションの遅延設定
  data-aos-duration="1000"  アニメーションの長さ
  data-aos-easing="ease-in-out" イージングの設定
>
</div>

カスタマイズありなしで比べてみましょう。

こんな感じで、これまた簡単にアニメーションのカスタマイズをすることが出来ました。
素晴らしい。

ということで以上です。