2
Help us understand the problem. What are the problem?

posted at

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

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>

こんな感じです。
aosTest.gif
か、かんたんすぎる...!

カスタマイズ

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

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>

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

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

ということで以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?