Vue.js でページの背景にマウス カーソルの周囲に放射状のグラデーションを追加する方法

Web サイトにスパイスを加えるために、画面ビューに沿ってマウスを動かすたびに、カーソルの周囲で光る放射状のグラデーションを実装することにしました。次の実装は、TypeScript で構築された Vue.js プロジェクトに適合しています。

この結果を達成するために、簡単にするためにデバイス検出用のライブラリも使用したいと思います。私の選択は ua-parser-js、正確にはバージョン 2.0.0 です。

2 番目のコーラル ステップは、グラデーション コンポーネントの作成です。これは、グラデーションが輝く領域になるため、すべてのビューのメイン コンテナである必要があります。

// src/components/Gradient.vue

<script lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { isMobile } from '../utils/device'

export default {
  name: 'GradientView',
  setup() {
    const getViewCentrePosition = () => ({
      x: window.innerWidth / 2,
      y: window.innerHeight / 2
    })

    const cursorPositionRef = ref(getViewCentrePosition())

    const updateCursorPosition = (event: MouseEvent) => {
      if (!isMobile()) {
        cursorPositionRef.value = {
          x: event.clientX,
          y: event.clientY
        }
      }
    }

    onMounted(() => {
      if (!isMobile()) {
        window.addEventListener('mousemove', updateCursorPosition)
      }
    })

    onUnmounted(() => {
      if (!isMobile()) {
        window.removeEventListener('mousemove', updateCursorPosition)
      }
    })

    const gradientPosition = computed(() => {
      return `${cursorPositionRef.value.x}px ${cursorPositionRef.value.y}px`
    })

    return {
      gradientPosition
    }
  },
  data() {
    return {
      isMobileClass: isMobile()
    }
  }
}
</script>

<template>
  <div :class="{ 'gradient--desktop': !isMobileClass, gradient: true }" :style="{ '--gradient-position': gradientPosition }">
    <slot></slot>
  </div>
</template>

<style scoped lang="scss">
div {
  .gradient.gradient--desktop {
    background-image: radial-gradient(
      circle at var(--gradient-position, 50% 50%),
      var(--tertiary-color),
      var(--secondary-color) 20%
    );
    width: 100vw;
    height: 100vh;
    overflow: scroll;

    @media (prefers-color-scheme: dark) {
      background-image: radial-gradient(
        circle at var(--gradient-position, 50% 50%),
        var(--tertiary-color),
        var(--primary-color) 20%
      );
    }
  }
}
</style>

コードを理解しましょう。スクリプトセクションには、単に初期位置、つまり画面ビューの中心を返す関数があります。たとえば、非表示にしたり、最初のマウス トリガー後のアニメーションで表示できる左上の位置に表示したりするなど、別の方法で処理することもできます。それは実装の選択です。わかりやすくするために、ビューの中心に追加します。

const getViewCentrePosition = () => ({
  x: window.innerWidth / 2,
  y: window.innerHeight / 2
})

次に、マウス イベントを通じて発生するカーソル マウスの動きを追跡するために使用されるオブジェクトへのリアクティブ参照を作成します。

const cursorPositionRef = ref(getViewCentrePosition())

次に、カーソルとマウスが移動するたびに、リアクティブな参照オブジェクトの更新を担当する関数を実装します。

const updateCursorPosition = (event: MouseEvent) => {
  if (!isMobile()) {
    cursorPositionRef.value = {
      x: event.clientX,
      y: event.clientY
    }
  }
}

この関数はマウス イベントに関連付ける必要があります。

onMounted(() => {
  if (!isMobile()) {
    window.addEventListener('mousemove', updateCursorPosition)
  }
})

onUnmounted(() => {
  if (!isMobile()) {
    window.removeEventListener('mousemove', updateCursorPosition)
  }
})

そして最後に、要素自体の CSS に提供されるグラデーション位置のリアクティブ値を計算します。

const gradientPosition = computed(() => {
  return `${cursorPositionRef.value.x}px ${cursorPositionRef.value.y}px`
})

上記のほとんどの部分では、不必要な無駄な計算を避けるために、検出されたデバイスがモバイル上にあるかどうかをチェックしていることに注意してください。

その後、テンプレート内でコンテンツの完全なページ ラッパーとして動作するグラデーションの HTML を作成し、必要な場合にのみ相対 CSS も適用します。

<template>
  <div :class="{ 'gradient--desktop': !isMobileClass, gradient: true }" :style="{ '--gradient-position': gradientPosition }">
    <slot></slot>
  </div>
</template>

これが CSS です。ここでは、明るいテーマと暗いテーマを実装する Web サイトのソリューションを提供します。トランジションに 2 つの色を使用します。外部部分では --primary-color と -- Secondary-color を使用し、内部部分では両方のテーマを --tertiary-color として設定します。ただし、選択と調整はあなた次第です。

<style scoped lang="scss">
.gradient.gradient--desktop {
  background-image: radial-gradient(
    circle at var(--gradient-position, 50% 50%),
    var(--tertiary-color),
    var(--secondary-color) 20%
  );
  width: 100vw;
  height: 100vh;
  overflow: scroll;

  @media (prefers-color-scheme: dark) {
    background-image: radial-gradient(
      circle at var(--gradient-position, 50% 50%),
      var(--tertiary-color),
      var(--primary-color) 20%
    );
  }
}
</style>

最後に、前述したように、デバイスを検出するために使用されているユーティリティはこれだけです。

// src/utils/device.ts

import { UAParser } from 'ua-parser-js'

export const isMobile = (): boolean => {
  const uap = new UAParser()
  return uap.getDevice().type === 'mobile'
}

もっと良いアイデアはありますか?聞いてみたいです。

以上がVue.js でページの背景にマウス カーソルの周囲に放射状のグラデーションを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。