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)));
}
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>