Сохраните предыдущую позицию, когда я перетаскиваю курсор по тексту ⇐ CSS

[Гость]

I want to store the previous position while moving the cursor. I want increase the background-position of the the text if the current position is greater than the previous position, and vise versa.

let text = document.querySelector(".text") let wrapper = document.getElementsByClassName("wrapper"); let posX = 0; const SPEED = 4; let previousPos = 0; text.addEventListener("mousemove", (e) => { let currentPos = getComputedStyle(text).backgroundPositionX; if (currentPos > previousPos) { posX += SPEED; } else { posX -= SPEED; } previousPos = currentPos; console.log(`${previousPos} : ${currentPos}`) text.style.backgroundPositionX = `${posX}%`; }) * { 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: rgb(138, 43, 226); 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; } Typography


Источник: https://stackoverflow.com/questions/781 ... n-the-text