定制 Cursor - 快速移动时更改比例

Question

I've created a custom cursor and I want to change its scale dynamically on fast movements. It's a cursor like this one: Cuberto.com

My cursor: CodeSandBox

When the cursor moves quickly to the right or left, scaleX should grow and get smaller again. When the cursor moves up or down, scaleY should grow and so on...

How can I do this?

My cursor

mounted() {
    this.customCursor()
  },

  methods: {
    customCursor() {
      const self = this
      const cursor = self.$refs.cursor
      document.addEventListener('mousemove', (e) => {
        cursor.setAttribute(
          'style',
          'top: ' + (e.pageY - scrollY) + 'px; left: ' + e.pageX + 'px;'
        )
      })
    },
  },

Answer 1

In order to create this effect, here are some steps to achieve that, starting from the end:

1. You will want to use scaleX() and scaleY() in CSS transforms
2. You will therefore need to somehow get the velocity of the cursor movement in the x and y axis
3. To get the velocity you will need the following information:
   • The current position of the cursor (easily accessed via the MouseEvent object)
   • The previous position of the cursor (you will need to cache this)
   • The time elapsed between the previous mouse event and current mouse event

With this strategy in mind, here is how it could be done:

Step 1: Allow your data object to cache the previous XY coordinates and timestamp

This can be done by simply updating the data object:

data() {
  return {
    hideCursor: false,
    prevX: 0,
    prevY: 0,
    prevTimeStamp: 0,
  };
},

Step 2: Ensure that you cache these values in your mousemove callback:

We need to store these values at the very end of the mousemove callback, and place the rest of our logic before that (we will get to that later).

document.addEventListener("mousemove", (e) => {
  // SOME LOGIC HERE

  // Update cached values
  this.prevX = e.pageX;
  this.prevY = e.pageY;
  this.prevTimeStamp = e.timeStamp;
});

Step 3: Calculate velocity by comparing current and previous value

To calculate velocity in the X and Y axes, you need to calculate the absolute difference between previous and current X/Y values, and divide them by the time elapsed:

const deltaX = Math.abs(e.pageX - this.prevX);
const deltaY = Math.abs(e.pageY - this.prevY);
const deltaTime = e.timeStamp - this.prevTimeStamp;
const velocityX = deltaX / deltaTime;
const velocityY = deltaY / deltaTime;

Step 4: Determine how to translate velocities into CSS scale transform

This is completely arbitrarily determined and it's up to you . For me, dividing the calculated velocity by 10 gives an effect that I find not too jarring/abrupt and still perceptible to the user. This value might need to be changed based on the absolute pixel size of the cursor.

const scaleX = 1 + velocityX / 10;
const scaleY = 1 + velocityY / 10;

cursor.style.top = `${e.pageY}px`;
cursor.style.left = `${e.pageX}px`;
cursor.style.transform = `translate(-50%, -50%) scaleX(${scaleX}) scaleY(${scaleY})`;

(Optional) Step 5: Ensure that you handle mouseout event on the viewport

This is so that the cursor is not stuck in a strange state when mouse leaves the viewport:

document.addEventListener('mouseout', () => {
  cursor.style.transform = 'none';
});

---

See an updated example based on your CodeSandbox: