moving text with scroll

user_18485639 0
Viewed 30

So I'm trying to convert some guys tutorial from an animation that moves when the mouse moves to moving when scrolling down. it is moving now but only when I move both my mouse and scroll at the same time.

I am looking for a method that moves the words when just scrolling

<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)));
}
css html javascript
1 Answers

your javascript will be like this

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>

user_165616380
Related