How to add a radial gradient around the mouse cursor on the background of a page in Vue.js-CSS Tutorial-php.cn

How to add a radial gradient around the mouse cursor on the background of a page in Vue.js

Barbara Streisand

Release： 2024-12-03 15:19:10

Original

568 people have browsed it

How to add a radial gradient around the mouse cursor on the background of a page in Vue.js

In order to spice up a website, I decide to implement a radial gradient that shines around the cursor, on every mouse movement along the screen view. The following implementation is adapted to a Vue.js project built with TypeScript.

In order to achieve this result, I also want to use, for simplicity, a library for device detection, and my choice goes to ua-parser-js, precisely the version 2.0.0.

The second and coral step is the creation of a gradient component, that must be the main container of all the view, since it will be the area where the gradient will be shining.

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

Copy after login

Let's understand the code. In the script section I have a function that simply returns the initial position, the centre of the screen view. It could be handled differently, for example hidden, or on the top left position that can appear with an animation after the first mouse trigger. It is an implementation choice. For simplicity I add it at the centre of the view.

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

Copy after login

Then I create a reactive reference to the object that will be in use to track cursor mouse movements, occurring through the mouse events.

const cursorPositionRef = ref(getViewCentrePosition())

Copy after login

Then I implement the function that is in charge of updating the reactive reference object, after every cursor mouse movement.

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

Copy after login

This function needs to be associated to the mouse events.

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

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

Copy after login

And finally I compute the reactive value of the gradient position, that will be provided to the css of the element itself.

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

Copy after login

Note that in most of the parts above described, I do make a check if the detected device is on mobile or not, to avoid useless computations where unnecessary.

Afterwards in the template I create the html of the gradient, that behaves as a full page wrapper for the content, and I also apply the relative css, only if needed.

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

Copy after login

And this is the css. I offer here a solution for a website that implements light and dark theme, and I make use of two colors for the transition, on the external part I use --primary-color and --secondary-color colors, while the internal part is setup for both themes as --tertiary-color. But, choice and tuning, is yours.

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

Copy after login

At last, this is the only utility in use, as previously mentioned, to detect the device.

// src/utils/device.ts

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

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

Copy after login

Better ideas? Curious to hear them.

The above is the detailed content of How to add a radial gradient around the mouse cursor on the background of a page in Vue.js. For more information, please follow other related articles on the PHP Chinese website!