Nuxt.jsでスクロールアニメーションを入れる- ライブラリ Animated on Scroll (AOS)

nuxtjs

明けましておめでとうございます。

フロントエンドエンジニアリングを勉強する前はjQuery多用ユーザーだったので、VueではjQuery使わないの?えっじゃあアニメーションとかコーディングしなきゃいけないの!?と慌てふためく脆弱エンジニアでした。VueやNuxtではライブラリが充実しているんですね〜ありがたやありがたや。

というわけで、今回はNuxt.jsにスクロールアニメーションを実装します。ライブラリで。(倒置法)

参考サイト
https://michalsnik.github.io/aos/
https://zacheryng.com/nuxt-with-animated-on-scroll/

npm install aos --save

グローバルに使いたいので@/plugins/aos.jsに導入。

import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'

Vue.use(
  AOS.init({
    once: true,
    disable: window.innerWidth < 640,
    duration: 750,
    easing: 'ease-out-quart',
  })
)

nuxt.configに追記

plugins: [
    { src: "@/plugins/aos", mode: "client" },
  ],
purgeCSS: {
    whitelist: ["aos-init", "aos-animate", "data-aos-delay", "data-aos-duration", "fade-up", "zoom-in"],
}

描画。(vuetify使っているのでplacementValいらなかったです…)

            <v-item-group>
              <v-row>
                <v-col v-for="item in serviceItems" :key="item.name">
                  <v-item
                    :data-aos="`${item.motionVal}`"
                    :data-aos-anchor-placement="`${item.placementVal}`"
                  >
                    <v-card
                      height="200"
                      class="d-flex align-center top_services_item"
                      >{{ item.name }}</v-card
                    >
                  </v-item>
                </v-col>
              </v-row>
            </v-item-group>
<script>
export default {
  data() {
    return {
      serviceItems: [
        {
          name: 'item1',
          contents: 'ここに説明が入ります。',
          placementVal: 'top-center',
          motionVal: 'fade-up',
        },
        {
          name: 'item2',
          contents: 'ここに説明が入ります。',
          placementVal: 'center-center',
          motionVal: 'fade-down',
        },
        {
          name: 'item3',
          contents: 'ここに説明が入ります。',
          placementVal: 'bottom-center',
          motionVal: 'fade-up',
        },
    }
  },
}
</script>        

Author: Noreen

どうも、こんにちは。 国外をフラフラフラフラしながら仕事をしていましたが、コロナもあり自粛中です。現在は米カリフォルニアベイエリアでカロリー摂取の日々。 ブログではどこかの誰かの役に立つかもしれない情報を気ままに更新しています。