스크롤시 글씨 움직이기 채택완료
안녕하세요
pc에서 스크롤시 해당 영역에 스크롤이 도착하면 글씨를 우측 -> 좌측으로 움직이게 끔 코딩하고싶습니다.
그런데 해당영역에서 움직임이 진행되는것이아니라 처음로딩했을때부터 스크롤이 이동 진행됩니다ㅠㅠ
해당 스크롤 해당 영역에서만 글씨가 움직이게끔 가능할까요??
해당 글씨 움직임이 총2개가 있습니다.. 각각 스크롤시 해당영역에서만 움직이게끔 진행하고싶습니다!
</strong></p>
<p> </p>
<p><strong><style></strong></p>
<p> </p>
<p>.section-title{ margin: 0;</p>
<p> font-size: 200px;width: 100%;text-align: center;position: absolute;top: 50%;right: -30%;transform: translateY(-50%);z-index: -1;white-space: nowrap;}</p>
<p>.paralax-title{font-family: var(--font-Poppins); font-size: 20rem; color: #0981fd; opacity: 0.05; font-weight: 600;}</p>
<p><strong></style></strong></p>
<p> </p>
<p><div class="section-title"></p>
<p> <h3 class="paralax-title">TEST</h3></p>
<p> </div></p>
<p> </p>
<p><script></p>
<p>let didScroll = false;</p>
<p>let paralaxTitles = document.querySelectorAll('.paralax-title');</p>
<p> </p>
<p>const scrollInProgress = () => {</p>
<p> didScroll = true</p>
<p>}</p>
<p> </p>
<p>const raf = () => {</p>
<p> if(didScroll) {</p>
<p> paralaxTitles.forEach((element, index) => {</p>
<p> element.style.transform = "translateX("+ window.scrollY / 10 + "%)"</p>
<p> })</p>
<p> didScroll = false;</p>
<p> }</p>
<p> requestAnimationFrame(raf);</p>
<p>}</p>
<p>requestAnimationFrame(raf);</p>
<p>window.addEventListener('scroll', scrollInProgress)</p>
<p></script></p>
<p> </p>
<p> </p>
<p><strong>
답변 1개
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
