Vue.js でページの背景にマウスカーソルの周囲に放射状のグラデーションを追加する方法-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-12-03 15:19:10

オリジナル

614 人が閲覧しました

How to add a radial gradient around the mouse cursor on the background of a page in 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 />
  </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 />
  </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 サイトの他の関連記事を参照してください。