Vue.js 페이지 배경의 마우스 커서 주위에 방사형 그래디언트를 추가하는 방법

웹사이트를 더욱 멋지게 만들기 위해 화면 보기에서 마우스를 움직일 때마다 커서 주변이 빛나는 방사형 그라데이션을 구현하기로 결정했습니다. 다음 구현은 TypeScript로 빌드된 Vue.js 프로젝트에 적용됩니다.

이 결과를 얻기 위해 단순화를 위해 장치 감지용 라이브러리도 사용하고 싶습니다. 제가 선택한 것은 정확히 2.0.0 버전인 ua-parser-js입니다.

두 번째 산호 단계는 그라데이션 구성 요소를 생성하는 것입니다. 이 구성 요소는 그라데이션이 빛날 영역이 되기 때문에 모든 뷰의 주요 컨테이너여야 합니다.

// 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입니다. 나는 여기에서 밝은 테마와 어두운 테마를 구현하는 웹 사이트에 대한 솔루션을 제공하고 전환을 위해 두 가지 색상을 사용합니다. 외부 부분에는 --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 중국어 웹사이트의 기타 관련 기사를 참조하세요!