스크롤시 글씨 움직이기

스크롤시 글씨 움직이기

QA

스크롤시 글씨 움직이기

답변 1

본문

 

안녕하세요 

 

pc에서 스크롤시 해당 영역에 스크롤이 도착하면 글씨를 우측 -> 좌측으로 움직이게 끔 코딩하고싶습니다.

 

그런데 해당영역에서 움직임이 진행되는것이아니라 처음로딩했을때부터 스크롤이 이동 진행됩니다ㅠㅠ

 

해당 스크롤 해당 영역에서만 글씨가 움직이게끔 가능할까요??

 

해당 글씨 움직임이 총2개가 있습니다.. 각각 스크롤시 해당영역에서만 움직이게끔 진행하고싶습니다!

 

 


 
<style>
 
.section-title{ margin: 0;
  font-size: 200px;width: 100%;text-align: center;position: absolute;top: 50%;right: -30%;transform: translateY(-50%);z-index: -1;white-space: nowrap;}
.paralax-title{font-family: var(--font-Poppins); font-size: 20rem; color: #0981fd; opacity: 0.05; font-weight: 600;}
</style>
 
<div class="section-title">
            <h3 class="paralax-title">TEST</h3>
 </div>
 
<script>
let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');
 
const scrollInProgress = () => {
  didScroll = true
}
 
const raf = () => {
  if(didScroll) {
    paralaxTitles.forEach((element, index) => {
      element.style.transform = "translateX("+ window.scrollY / 10 + "%)"
    })
    didScroll = false;
  }
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress)
</script>
 
 

 

이 질문에 댓글 쓰기 :

답변 1

아래의 코드를 한번 참고를 해보시겠어요..

 

 

<style>
  body {
    height: 200vh; /* 스크롤을 위해 충분한 높이 추가 */
  }

  .scroll-area {
    position: relative;
    height: 100vh; /* 전체 화면을 차지하는 영역 */
    background-color: #f0f0f0; /* 배경색 */
    overflow: hidden; /* 내부 내용이 영역을 넘치지 않도록 */
  }

  .section-title {
    margin: 0;
    font-size: 200px;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    right: -30%; /* 초기 위치 */
    transform: translateY(-50%);
    z-index: -1;
    white-space: nowrap;
  }

  .paralax-title {
    font-family: var(--font-Poppins);
    font-size: 20rem;
    color: #0981fd;
    opacity: 0.05;
    font-weight: 600;
  }
</style>

<div class="scroll-area">
  <div class="section-title">
    <h3 class="paralax-title">TEST</h3>
  </div>
</div>

<script>
let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');
let scrollArea = document.querySelector('.scroll-area');
let scrollAreaTop = scrollArea.offsetTop;
let scrollAreaHeight = scrollArea.offsetHeight;

const scrollInProgress = () => {
  didScroll = true;
}

const raf = () => {
  if (didScroll) {
    const scrollY = window.scrollY;

    // 스크롤이 특정 영역에 있는지 확인
    if (scrollY >= scrollAreaTop && scrollY <= (scrollAreaTop + scrollAreaHeight)) {
      const moveAmount = (scrollY - scrollAreaTop) / 10; // 이동량 계산
      paralaxTitles.forEach((element) => {
        element.style.transform = `translateX(${moveAmount}px)`;
      });
    } else {
      // 영역 밖일 때 초기 위치로 되돌리기
      paralaxTitles.forEach((element) => {
        element.style.transform = `translateX(-30%)`; // 초기 위치 값으로
      });
    }

    didScroll = false;
  }
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress);
</script>
 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 138
© SIRSOFT
현재 페이지 제일 처음으로