Движение текста по наведению мыши

Question

Как сделать так, чтобы текст в блоке передвигался слева направо и обратно по наведению мыши?

body {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: black;
}

.container {
  overflow: hidden;
  background: white;
  white-space: nowrap;
  padding: 10vh 0;
}

.title {
  font: bold normal 12vw Arial, serif;
  position: relative;
  color: black;
  display: inline-block;
}

<section class="container">
  <h1 class="title">Заголовок – это вводная фраза текста, рекламы или объявления. Заголовок по сути своей является рекламой следующего за ним текста.</h1>
</section>

Answer 1

const el = document.querySelector(".title");
let elWidth = el.offsetWidth;
let windowWidth = window.innerWidth;
let mouseX = 0;
let prevMouseX = 0;
let skewTarget = 0;
let translateTarget = 0;
let skewWithEasing = 0;
let translateWithEasing = 0;
let skewEasingFactor = 0.1;
let translateEasingFactor = 0.05;
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("resize", handleWindowResize);

function handleMouseMove(e) {
  mouseX = e.pageX;
}

function handleWindowResize(e) {
  elWidth = el.offsetWidth;
  windowWidth = window.innerWidth;
}

function lerp(start, end, factor) {
  return (1 - factor) * start + factor * end;
}

function animateMe() {
  skewTarget = mouseX - prevMouseX;
  prevMouseX = mouseX;
  translateTarget = (elWidth - windowWidth) / windowWidth * mouseX * -1;
  skewWithEasing = lerp(skewWithEasing, skewTarget, skewEasingFactor);
  skewWithEasing = Math.min(Math.max(parseInt(skewWithEasing), -75), 75);
  translateWithEasing = lerp(
    translateWithEasing,
    translateTarget,
    translateEasingFactor
  );
  el.style.transform = `
    translateX(${translateWithEasing}px)
    skewX(${skewWithEasing}deg)
  `;
  window.requestAnimationFrame(animateMe);
}
window.requestAnimationFrame(animateMe);

body {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: black;
}

.container {
  overflow: hidden;
  background: white;
  cursor: ew-resize;
  white-space: nowrap;
  padding: 10vh 0;
}

.title {
  font: bold normal 12vw/1.2 Arial, serif;
  position: relative;
  color: black;
  display: inline-block;
  margin: 0;
  padding: 0 15%;
  will-change: transform;
}

<section class="container">
  <h1 class="title">Заголовок – это вводная фраза текста, рекламы или объявления. Заголовок по сути своей является рекламой следующего за ним текста.</h1>
</section>

БЛОГ НА HUSL

Движение текста по наведению мыши

Ответы (1 шт):