Comment ajouter un dégradé radial autour du curseur de la souris sur l'arrière-plan d'une page dans Vue.js

Afin de pimenter un site Web, je décide d'implémenter un dégradé radial qui brille autour du curseur, à chaque mouvement de la souris le long de l'écran. L'implémentation suivante est adaptée à un projet Vue.js construit avec TypeScript.

Afin d'arriver à ce résultat, je souhaite également utiliser, par simplicité, une bibliothèque de détection de périphériques, et mon choix se porte sur ua-parser-js, précisément la version 2.0.0.

La deuxième étape, corail, est la création d'un composant de dégradé, qui doit être le conteneur principal de toute la vue, car ce sera la zone où le dégradé brillera.

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

Comprenons le code. Dans la section script, j'ai une fonction qui renvoie simplement la position initiale, le centre de la vue de l'écran. Il pourrait être géré différemment, par exemple masqué, ou en position supérieure gauche pouvant apparaître avec une animation après le premier déclenchement de la souris. C'est un choix de mise en œuvre. Pour plus de simplicité, je l'ajoute au centre de la vue.

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

Ensuite, je crée une référence réactive à l'objet qui sera utilisé pour suivre les mouvements du curseur de la souris, se produisant via les événements de la souris.

const cursorPositionRef = ref(getViewCentrePosition())

Ensuite j'implémente la fonction qui se charge de mettre à jour l'objet de référence réactif, après chaque mouvement du curseur de la souris.

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

Cette fonction doit être associée aux événements de la souris.

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

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

Et enfin je calcule la valeur réactive de la position du dégradé, qui sera fournie au CSS de l'élément lui-même.

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

Notez que dans la plupart des parties décrites ci-dessus, je vérifie si l'appareil détecté est sur mobile ou non, pour éviter les calculs inutiles lorsqu'ils sont inutiles.

Ensuite, dans le modèle, je crée le html du dégradé, qui se comporte comme un wrapper pleine page pour le contenu, et j'applique également le CSS relatif, uniquement si nécessaire.

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

Et voici le CSS. Je propose ici une solution pour un site Web qui implémente le thème clair et sombre, et j'utilise deux couleurs pour la transition, sur la partie externe j'utilise les couleurs --primary-color et --secondary-color, tandis que la partie interne est configuration pour les deux thèmes en tant que --tertiary-color. Mais le choix et le réglage vous appartiennent.

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

Enfin, c'est le seul utilitaire utilisé, comme mentionné précédemment, pour détecter l'appareil.

// src/utils/device.ts

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

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

De meilleures idées ? Curieux de les entendre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!