Как привязать вертикальный скролл к горизонтальной анимации на чистом JS?

Подскажите пожалуйста, как реализовать "чувствительный" эффект анимации, чтобы горизонтальная анимация была привязана к скролу

Пример: https://drive.google.com/file/d/1W5P6hz-ssfRmjlgsC...
Слово "combo".

Заранее благодарю!
На данный момент я смог сделать анимацию только без "чувствительной" привязки к скролу.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <section class="step1"><h2 class="move">MOVE IT</h2></section>
  <section class="step2"><h2>STEP 2</h2></section>
</body>
</html>


.step1 {
  height: 100vh;
  background: #ccc;
  padding: 5rem;
}
.step2 {
  height: 500px;
  background: yellow;
  padding: 5rem;
}
.move {
  display: block;
  border: solid;
  padding: 2rem;
  object-fit: contain;
  width: 150px;
}


const moveBtn = document.querySelector('.move');

document.addEventListener("scroll", moveRight);

function moveRight() {
  moveBtn.style.marginLeft = "200px";
  moveBtn.style.transition = "all 1s";
}
  • Вопрос задан
  • 28 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы