Help us understand the problem. What is going on with this article?

Nuxt.js でスクロールでふわっと要素が出現するやつを「カスタムディレクティブ」で実装する

More than 1 year has passed since last update.

Nuxt.js でWEBサイト作っていると、スクロールで何か処理をしたいことがある。
そんなときはカスタムディレクティブが便利。特にスクロールでふわっと要素が出てくる系は、様々な箇所で同じアニメーションロジックを再利用する為、カスタムディレクティブは相性が良いです。

Nuxt.jsでの実装上でのポイント

ポイントはドキュメントにも書いてある通り、「カスタムディレクティブは Vue インスタンス作成前に登録されなければならない」という点。Nuxt.js では Vue インスタンス作成前に実行したい処理は plugins ディレクトリがその責務を担います。plugins/README.md に書いてある通りです。

This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.

なので、まずはpluginsディレクトリの中でscroll.jsを作成し、カスタムディレクティブを作りましょう。

plugins/scroll.js
import Vue from 'vue'

Vue.directive('scroll', {
    inserted: function (el, binding) {
        let f = function (evt) {
            if (binding.value(evt, el)) {
                window.removeEventListener('scroll', f)
            }
        }
        window.addEventListener('scroll', f)
    }
})

コードはVueの公式ドキュメントから拝借しました。
カスタムスクロールディレクティブの作成

inserted はひも付いている要素が親 Node に挿入された時に呼ばれるもの。
他のカスタムディレクティブのフック関数は下記ドキュメント参照。
カスタムディレクティブ

そして、nuxt.config.js内の plugins に作成した ファイルへのパスを追加します。

nuxt.config.js
module.exports = {
  // ~
  plugins: [
    '~plugins/scroll.js'
  ]
}

これでv-scrollというカスタムディレクティブがtemplate内で使えるようになります。

作ったカスタムディレクティブを使ってみる

もしあなたが Nuxt.js のプロジェクトを作りたてならpages/index.vueで試して見ましょう。

pages/index.vue
<template>
  <section class="container">
    <div>
      <div class="box" v-scroll="handleScroll">scroll hock</div>
    </div>
  </section>
</template>

<script>
export default {
  methods: {
    handleScroll: function(evt, el) {
      console.log(window.scrollY);
      if (window.scrollY > 50) {
        el.setAttribute(
          "style",
          "opacity: 1; transform: translate3d(0, -10px, 0)"
        );
      }
      return window.scrollY > 100;
    }
  }
};
</script>

<style>
.container {
  min-height: 150vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.box {
  opacity: 0;
  transition: 1.5s all cubic-bezier(0.39, 0.575, 0.565, 1);
}
</style>

v-scrollで発火するメソッドを指定しています。
これでスクロールイベントをv-scrollと宣言するだけで行えるようになりました。

po3rin
ブログを移しました。https://po3rin.com/
https://po3rin.com/
shiroyagi_corp
私たちは、自然言語処理、機械学習、データ処理のエキスパートです。データとコンピューティングの力を使って、一人ひとりの持つ時間の価値を最大化します。
https://shiroyagi.co.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした