Cara menambah kecerunan jejari di sekeliling kursor tetikus pada latar belakang halaman dalam Vue.js

Untuk menyemarakkan tapak web, saya memutuskan untuk melaksanakan kecerunan jejari yang bersinar di sekeliling kursor, pada setiap pergerakan tetikus di sepanjang paparan skrin. Pelaksanaan berikut disesuaikan dengan projek Vue.js yang dibina dengan TypeScript.

Untuk mencapai hasil ini, saya juga ingin menggunakan, untuk kesederhanaan, perpustakaan untuk pengesanan peranti, dan pilihan saya pergi ke ua-parser-js, tepatnya versi 2.0.0.

Langkah kedua dan karang ialah penciptaan komponen kecerunan, yang mesti menjadi bekas utama semua pandangan, kerana ia akan menjadi kawasan di mana kecerunan akan bersinar.

// 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>

Mari kita fahami kod tersebut. Dalam bahagian skrip saya mempunyai fungsi yang hanya mengembalikan kedudukan awal, bahagian tengah paparan skrin. Ia boleh dikendalikan secara berbeza, contohnya tersembunyi, atau pada kedudukan kiri atas yang boleh muncul dengan animasi selepas pencetus tetikus pertama. Ia adalah pilihan pelaksanaan. Untuk memudahkan saya menambahnya di tengah-tengah pandangan.

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

Kemudian saya mencipta rujukan reaktif kepada objek yang akan digunakan untuk menjejaki pergerakan kursor tetikus, yang berlaku melalui peristiwa tetikus.

const cursorPositionRef = ref(getViewCentrePosition())

Kemudian saya melaksanakan fungsi yang bertanggungjawab mengemas kini objek rujukan reaktif, selepas setiap pergerakan tetikus kursor.

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

Fungsi ini perlu dikaitkan dengan peristiwa tetikus.

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

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

Dan akhirnya saya mengira nilai reaktif kedudukan kecerunan, yang akan diberikan kepada css elemen itu sendiri.

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

Perhatikan bahawa dalam kebanyakan bahagian yang diterangkan di atas, saya membuat semakan sama ada peranti yang dikesan berada pada mudah alih atau tidak, untuk mengelakkan pengiraan yang tidak berguna jika tidak diperlukan.

Selepas itu dalam templat saya mencipta html kecerunan, yang berfungsi sebagai pembungkus halaman penuh untuk kandungan, dan saya juga menggunakan css relatif, hanya jika perlu.

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

Dan ini ialah css. Saya menawarkan di sini penyelesaian untuk tapak web yang melaksanakan tema terang dan gelap, dan saya menggunakan dua warna untuk peralihan, pada bahagian luaran saya menggunakan --warna-warna-utama dan --warna-warna-sekunder, manakala bahagian dalam adalah persediaan untuk kedua-dua tema sebagai --tertiary-color. Tetapi, pilihan dan penalaan, adalah milik anda.

<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>

Akhirnya, ini adalah satu-satunya utiliti yang digunakan, seperti yang dinyatakan sebelum ini, untuk mengesan peranti.

// src/utils/device.ts

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

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

Idea yang lebih baik? Ingin tahu mendengarnya.

Atas ialah kandungan terperinci Cara menambah kecerunan jejari di sekeliling kursor tetikus pada latar belakang halaman dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!