horizontal text scroll effect

HTML

<div class="line-1">
    <h1>Welcome To My Website</h1>
  </div>
  <div class="line-2">
    <h1>This Text Moves When You Scroll</h1>
  </div>

  <script src="app.js"></script>

CSS

line-1은 왼쪽으로 800px 밀어두고 (left값이 음수이므로)
line-2는 오른쪽으로 800px 밀어두기 (right값이 양수이므로)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Sigmar One', cursive;
  color: #000;
  font-size: 1.5rem;
}

body, html {
  width: 100%;
  height: 500vh;
}

.line-1 {
  position: fixed;
  top: 40%;
  left: -800px;
  white-space: nowrap;
}

.line-2 {
  position: fixed;
  top: 45%;
  right: -800px;
  white-space: nowrap;
}

JS

스크롤 할 때마다,
스크롤 값을 left, right에 삽입하기

let line1 = document.querySelector('.line-1');
let line2 = document.querySelector('.line-2');

window.onscroll = () => {
  let pos = window.scrollY - 800;

  line1.style.left = `${pos}px`;
  line2.style.right = `${pos}px`;
}

참고

Horizontal Text Scroll Effect With JavaScript