鼠标在文本上移动时记录上一位置，动态调整background-position

需求：鼠标在文本上移动时，根据鼠标X轴移动方向调整文本的渐变背景位置——鼠标向右移动时增大background-position-x，向左移动时减小该值。

原代码存在逻辑错误：错误地将当前文本的background-position-x值与上一次的该值进行比较，而非跟踪鼠标的实际位置变化，导致背景位置无法随鼠标移动方向正确调整。以下是修复后的完整实现：

HTML 结构 #

<body>
  <main class="wrapper">
    <h1 class="text">Typography</h1>
  </main>
</body>

CSS 样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient( to right, rgb(138, 43, 226) 20%, rgb(74, 30, 158) 40%, rgb(74, 30, 158) 60%, rgb(74, 30, 158) 80%, rgb(148, 226, 43) 100%);
  background-size: 400%;
  letter-spacing: .4em;
  font-size: 16px;
}

@media (max-width: 800px) {
  body {
    font-size: 13px;
  }
}

@media (max-width: 655px) {
  body {
    font-size: 10px;
  }
}

@media (max-width: 502px) {
  body {
    font-size: 6px;
  }
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3em 3em;
  border-radius: 8px;
  background-color: white;
}

.text {
  font-size: 6em;
  text-transform: uppercase;
  font-weight: 900;
  font-style: italic;
  color: transparent;
  background-image: linear-gradient( to right, rgb(138, 43, 226) 20%, rgb(74, 30, 158) 40%, rgb(74, 30, 158) 60%, rgb(74, 30, 158) 80%, rgb(148, 226, 43) 100%);
  background-size: 200%;
  background-position-x: 0%;
  -webkit-background-clip: text;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

JavaScript 逻辑 #

const text = document.querySelector(".text");
let posX = 0;
const SPEED = 4;
let prevMouseX = null;

text.addEventListener("mousemove", (e) => {
  // 第一次进入元素时初始化鼠标上一位置
  if (prevMouseX === null) {
    prevMouseX = e.clientX;
    return;
  }

  const currentMouseX = e.clientX;
  
  // 根据鼠标移动方向调整背景位置
  if (currentMouseX > prevMouseX) {
    posX += SPEED;
  } else if (currentMouseX < prevMouseX) {
    posX -= SPEED;
  }

  // 限制背景位置范围，避免过度偏移
  posX = Math.max(0, Math.min(100, posX));
  
  text.style.backgroundPositionX = `${posX}%`;
  prevMouseX = currentMouseX;
});

// 鼠标离开时重置位置记录，避免再次进入时判断异常
text.addEventListener("mouseleave", () => {
  prevMouseX = null;
});

关键说明 #

• 核心逻辑改为跟踪鼠标clientX坐标的变化，通过比较当前与上一次的鼠标位置判断移动方向
• 添加mouseleave事件监听，重置位置记录，避免鼠标离开再进入时出现错误判断
• 增加posX范围限制（0-100%），防止渐变背景偏移超出可视范围

内容的提问来源于stack exchange，提问作者Steve Carter