[EFFECT] 페럴렉스 효과07 : 텍스트 효과

🖱 페럴렉스 효과 : 텍스트 효과 🖱

페럴랙스(parallax)란 의미로 사용자가 스크롤링을 할 때 발생하는 이벤트(배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과 등)를 말합니다.
이번 시간에는 스크롤을 내릴 때 텍스트를 쪼개어 각각 하나의 요소로 만들어 준 뒤 css의 딜레이 속성을 통해 글씨가 하나씩 움직이도록 실습해보겠습니다! 🫠🫠🫠

---

#1. HTML / CSS 설정하기

✏️ HTML 보기

<main id="parallax__cont">
  <div id="contents">
    <section id="section1" class="content__item">
      <span class="content__item__num">01</span>
      <h1 class="content__item__title">section1</h1>
      <figure class="content__item__imgWrap">
        <div class="content__item__img"></div>
      </figure>
      <p class="content__item__desc">
        미래는 현재 우리가 무엇을 하는가에 달려 있다.
      </p>
    </section>
    <!-- //section1 -->

    <section id="section2" class="content__item">
      <span class="content__item__num">02</span>
      <h1 class="content__item__title">section2</h1>
      <figure class="content__item__imgWrap">
        <div class="content__item__img"></div>
      </figure>
      <p class="content__item__desc">
        어제로 돌아갈 수 없다. 왜냐하면 나는 어제와는 다른 사람이 되었기
        때문이다.
      </p>
    </section>
    <!-- //section2 -->

    <section id="section3" class="content__item">
      <span class="content__item__num">03</span>
      <h1 class="content__item__title">section3</h1>
      <figure class="content__item__imgWrap">
        <div class="content__item__img"></div>
      </figure>
      <p class="content__item__desc">
        언제나 현재에 집중할수 있다면 행복할것이다.
      </p>
    </section>
    <!-- //section3 -->

    <section id="section4" class="content__item">
      <span class="content__item__num">04</span>
      <h1 class="content__item__title">section4</h1>
      <figure class="content__item__imgWrap">
        <div class="content__item__img"></div>
      </figure>
      <p class="content__item__desc">
        먼저 핀 꽃은 먼저진다 남보다 먼저 공을 세우려고 조급히 서둘것이
        아니다.
      </p>
    </section>
    <!-- //section4 -->

    <section id="section5" class="content__item">
      <span class="content__item__num">05</span>
      <h1 class="content__item__title">section5</h1>
      <figure class="content__item__imgWrap">
        <div class="content__item__img"></div>
      </figure>
      <p class="content__item__desc">
        좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안
        된다.
      </p>
    </section>
    <!-- //section5 -->

    <section id="section6" class="content__item">
      <span class="content__item__num">06</span>
      <h1 class="content__item__title">section6</h1>
      <figure class="content__item__imgWrap">
        <div class="content__item__img"></div>
      </figure>
      <p class="content__item__desc">
        성공의 비결은 단 한 가지, 잘할 수 있는 일에 광적으로 집중하는
        것이다.
      </p>
    </section>
    <!-- //section6 -->

    <section id="section7" class="content__item">
      <span class="content__item__num">07</span>
      <h1 class="content__item__title">section7</h1>
      <figure class="content__item__imgWrap">
        <div class="content__item__img"></div>
      </figure>
      <p class="content__item__desc">
        꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.
      </p>
    </section>
    <!-- //section7 -->

    <section id="section8" class="content__item">
      <span class="content__item__num">08</span>
      <h1 class="content__item__title">section8</h1>
      <figure class="content__item__imgWrap">
        <div class="content__item__img"></div>
      </figure>
      <p class="content__item__desc">
        흔히 사람들은 기회를 기다리고 있지만 기회는 기다리는 사람에게 잡히지
        않는 법이다.
      </p>
    </section>
    <!-- //section8 -->

    <section id="section9" class="content__item">
      <span class="content__item__num">09</span>
      <h1 class="content__item__title">section9</h1>
      <figure class="content__item__imgWrap">
        <div class="content__item__img"></div>
      </figure>
      <p class="content__item__desc">
        이미끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지못한 것을
        후회하라.
      </p>
    </section>
    <!-- //section9 -->
  </div>
</main>
<!-- //main -->

<aside id="parallax__info">
  <div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- //parallax__info -->

html은 메뉴, 섹션, 섹션에 들어갈 콘텐츠(이미지와 텍스트)등을 마크업해주시면 됩니다.
이 때 섹션에 들어가는 콘텐츠들에게 선택자들을 부여하여 스크립트와 스타일을 주는 데 어려움이 없도록 합니다:)

✏️ CSS 보기

/* option : 애니메이션 동작 설정만 해주고 딜레이 설정은 스크립트를 사용하여 간편하게 애니메이션 주기 */
.split span {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.3s cubic-bezier(0, 0.71, 0.11, 1.66);
  display: inline-block;
  min-width: 1vw;
}

.split span.show  { 
  opacity: 1;
  transform: translateY(0);
}

/* option : 노가다 애니메이션 작업 : 텍스트가 쪼개어진 만큼 :nth-child로 각각 50ms씩 딜레이 설정 해주기. */
/* .split span {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.3s cubic-bezier(0, 0.71, 0.11, 1.66);
  display: inline-block;
  min-width: 1vw;
}

.split.show span {
  opacity: 1;
  transform: translateY(0);
} */

/* .split span:nth-child(1) {
  transition-delay: 100ms;
}
.split span:nth-child(2) {
  transition-delay: 150ms;
}
.split span:nth-child(3) {
  transition-delay: 200ms;
}
.split span:nth-child(4) {
  transition-delay: 250ms;
}
.split span:nth-child(5) {
  transition-delay: 300ms;
}
.split span:nth-child(6) {
  transition-delay: 350ms;
}
.split span:nth-child(7) {
  transition-delay: 400ms;
}
.split span:nth-child(8) {
  transition-delay: 450ms;
}
.split span:nth-child(9) {
  transition-delay: 500ms;
}
.split span:nth-child(10) {
  transition-delay: 550ms;
}
.split span:nth-child(11) {
  transition-delay: 600ms;
}
.split span:nth-child(12) {
  transition-delay: 650ms;
}
.split span:nth-child(13) {
  transition-delay: 700ms;
}
.split span:nth-child(14) {
  transition-delay: 750ms;
}
.split span:nth-child(15) {
  transition-delay:800ms;
}
.split span:nth-child(16) {
  transition-delay: 850ms;
}
.split span:nth-child(17) {
  transition-delay: 900ms;
}
.split span:nth-child(18) {
  transition-delay: 950ms;
}
.split span:nth-child(19) {
  transition-delay: 1000ms;
}
.split span:nth-child(20) {
  transition-delay: 1050ms;
}
.split span:nth-child(21) {
  transition-delay: 1100ms;
}
.split span:nth-child(22) {
  transition-delay: 1150ms;
}
.split span:nth-child(23) {
  transition-delay: 1200ms;
}
.split span:nth-child(24) {
  transition-delay: 1250ms;
}
.split span:nth-child(25) {
  transition-delay: 1300ms;
}
.split span:nth-child(26) {
  transition-delay: 1350ms;
}
.split span:nth-child(27) {
  transition-delay: 1400ms;
}
.split span:nth-child(28) {
  transition-delay: 1450ms;
}
.split span:nth-child(29) {
  transition-delay: 1500ms;
}
.split span:nth-child(30) {
  transition-delay: 1550ms;
}
.split span:nth-child(31) {
  transition-delay: 1600ms;
}
.split span:nth-child(32) {
  transition-delay: 1650ms;
}
.split span:nth-child(33) {
  transition-delay: 1700ms;
}
.split span:nth-child(34) {
  transition-delay: 1750ms;
}
.split span:nth-child(35) {
  transition-delay: 1800ms;
}
.split span:nth-child(36) {
  transition-delay: 1850ms;
}
.split span:nth-child(37) {
  transition-delay: 1900ms;
}
.split span:nth-child(38) {
  transition-delay: 1950ms;
}
.split span:nth-child(39) {
  transition-delay: 2000ms;
}
.split span:nth-child(40) {
  transition-delay: 2050ms;
}
.split span:nth-child(41) {
  transition-delay: 2100ms;
}
.split span:nth-child(42) {
  transition-delay: 2150ms;
}
.split span:nth-child(43) {
  transition-delay: 2200ms;
} */

CSS 속성은 페럴렉스05번과 똑같습니다! 위의 CSS만 추가해주시면 됩니다.
스크립트로 딜레이를 설정할 시 애니메이션이 작동할 수 있도록 CSS로 동적 효과를 추가하시면 됩니다.
또한 스크립트로 span을 선택했기 때문에 show클래스의 위치를 span옆으로 이동시켜줍니다.

---

#2. JAVASCRIPT : 스크립트로 페럴랙스 효과 주기

오늘 스크립트에서는 forEach반복문에서 문자열 메서드를 통해 텍스트를 각각 하나의 요소로 쪼개었습니다. 또한 쪼개어진 텍스트에게 각각 딜레이를 설정하여 스크롤이 내려갈 때 글씨가 하나씩 나타나도록 설정하였습니다.
그럼 주석과 함께 전체적인 흐름을 살펴 봅시다!

💡 전체 스크립트 보기

//글씨 쪼개기 - 한 섹션의 텍스트만 쪼개기
// let text = document.querySelector("#section1 .content__item__desc"); //첫번째 텍스트
// let splitText = text.innerText;
// //문자열 객체 참고
// let splitWrap = splitText.split('').join('</span><span>');
// text.innerHTML = splitWrap = "<span>" + splitWrap + "</span>";


//글씨 쪼개기 (여러개 : forEach문 이용 쿼리 All)
// let text = document.querySelectorAll("#contents .content__item__desc");
// text.forEach(el => {
//   let splitText = el.innerText;
//   let splitWrap = splitText.split('').join('</span><span>');
//   el.innerHTML = splitWrap = "<span>" + splitWrap + "</span>";
// });


//01
//글씨 쪼개기 다중 : 쪼개고 싶은 요소에 클래스를 추가 시켜 그 클래스를 모두 가져온다.
//그 뒤 문자열 메서드 split을 통해 텍스트를 하나씩 쪼개 주고 join()을 이용하여 각각 span태그를 감싸준다.(이때 닫는 태그와 여는 태그가 반대로 되므로 join순서를 반대로 써준다.)
//쪼갰을 때 접근성이 좋지 않기 때문에 문자열 메서드인 join()으로 넣어준 span태그 안에 aria-hidden='true' 속성을 넣어 숨겨준다.(스크린 리더기에만 안읽힘.)
document.querySelectorAll(".split").forEach(text => {
    let splitText = text.innerText;
    let splitWrap = splitText.split('').join("</span><span aria-hidden='true'>");
    //가장 앞 부분과 뒷부분에는 join이 먹히지 않으므로 따로 변수 안에 텍스트를 추가시킨다.
    splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>";
    //위의 바뀐 변수 값을 다시 저장시킨다.
    text.innerHTML = splitWrap;
    //위에 숨긴 텍스트를 리더기에 읽히기 하기 위해 aria-label 속성을 붙여준다.
    text.setAttribute("aria-label", splitText);
    // console.log(splitText);
});


//02
//스크롤 값 구하고 스크롤 움직일 때 애니메이션 구현하기.
function scroll() {
    let scrollTop = window.scrollY;
    document.querySelector("#parallax__info .scroll").innerText = Math.round(scrollTop);

    //CSS 스타일 설정을 위한 클래스 추가 스크립트. (노가다 ver. : CSS로 일일히 각 한 텍스트 당 딜레이 설정을 준 뒤 클래스만 추가.)
    // document.querySelectorAll(".content__item").forEach(item => {
    //   if(scrollTop >= item.offsetTop){
    //     item.querySelector(".split").classList.add("show");
    //   }
    // })
    
    //03 : CSS스타일 주기
    document.querySelectorAll(".content__item").forEach(item => {
    //만약 스크롤값이 각 섹션의 오프셋 값과 같다면.
    if( scrollTop >= item.offsetTop){
        //span태그를 모두 선택하여 인덱스 값까지 불러온 뒤 (span = element)
        item.querySelectorAll(".split span").forEach((element, index) => {
        //클래스 리스너를 통해 span 요소에게 클래스 show를 넣어 텍스트가 보이도록 합니다.
        element.classList.add("show");

        //또한 CSS속성 중 딜레이를 추가하여 한 글자 당 50ms씩 움직이도록 한다.
        element.style.transitionDelay = `${index * 50}ms`;
        });
    }
    });

    requestAnimationFrame(scroll); //(1초에 60번 실행. : 재귀함수)

}
scroll(); //실행

자바스크립트 정리 📌

//01 : 글씨 쪼개기 다중 : 쪼개고 싶은 요소에 클래스를 추가 시킨다.
document.querySelectorAll(".split").forEach(text => {
  let splitText = text.innerText;
  let splitWrap = splitText.split('').join("</span><span aria-hidden='true'>");
  splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>";
  text.innerHTML = splitWrap;
  text.setAttribute("aria-label", splitText);
});

//02 : 스크롤 값 구하고 스크롤 움직일 때 애니메이션 구현하기.
function scroll() {
  let scrollTop = window.scrollY;
  document.querySelector("#parallax__info .scroll").innerText = Math.round(scrollTop);
  
  //03 : CSS스타일 주기
  document.querySelectorAll(".content__item").forEach(item => {
  if( scrollTop >= item.offsetTop){
      item.querySelectorAll(".split span").forEach((element, index) => {
      element.classList.add("show");
      element.style.transitionDelay = `${index * 50}ms`;
      });
  }
  });

  requestAnimationFrame(scroll);

}
scroll(); //실행

---

원본 소스 보기

원본 페이지 보기