javascript - 通过滚动移动文本

Question

所以我试图将一些教程从鼠标移动时移动的动画转换为向下滚动时移动。它现在正在移动，但只有当我同时移动鼠标和滚动时。

我正在寻找一种在滚动时移动单词的方法

<section id="bbbb">
<div class="text">
<h2 style="--i:0.5"><span> because boring is bad for business</span>
</h2></div> 
</section>

const position = document.documentElement;
position.addEventListener('mousewheel', e => {
position.style.setProperty('--x', e.clientX + 'px')

})

.text h2 {
  position: relative;
  width: 100%;
  font-size: 6.5em;
  color: rgb(255, 255, 255);
  line-height: 1em;
  white-space: nowrap;
  text-shadow: calc(var(--x)) 100px 0 rgba(255, 255,255,0.2);
  transform: translateX(calc(0% - var(--x)*var(--i)));
}

Answer 1

你的 JavaScript 会是这样的

const element = document.querySelector("#container");

element.addEventListener('wheel', (event) => {
  event.preventDefault();

  element.scrollBy({
    left: event.deltaY < 0 ? -30 : 30,
    
  });
});

#container {
  display: flex;
  overflow-x: scroll;
  overflow-y:hidden;
  max-width: 50rem;
  margin: 0 auto;
}

.text h2 {
  position: relative;
  width: 100%;
  font-size: 6.5em;
  color: black;
  line-height: 1em;
  white-space: nowrap;
  text-shadow: calc(var(--x)) 100px 0 rgba(255, 255,255,0.2);
  transform: translateX(calc(0% - var(--x)*var(--i)));
}

<div id="container">
  <section id="bbbb">
    <div class="text">
      <h2 style="--i:0.5"><span> because boring is bad for business</span>
    </h2></div> 
  </section>
</div>