• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

SplitText를 순수 자바스크립트로 써봤어요

23.11.17 13:59 작성 조회수 273

3

// const { chars } = new SplitText('.stage h1', { type: 'chars' });
function splitTextChars(elem) {
  const textElem = document.querySelector(elem);
  const letters = textElem.textContent.split('');
  let newHTML = '';
  letters.forEach(letter => {
    newHTML +=
      /* HTML */
      ` <div style="position:relative; display:inline-block">${letter}</div>`;
  });
  textElem.innerHTML = newHTML;
  return [...document.querySelectorAll(`${elem} div`)];
}
const chars = splitTextChars('.stage h1');

복습중에 유료플러그인이나 라이브러리 없이 써보고싶어서 만들어봤습니다 ! 맞는 코드인지는 모르겠지만 혹시 참고하실분이 계실까 싶어 남겨둘게요 !ㅎㅎ

답변 1

답변을 작성해보세요.

2

안녕하세요 jay k 님 😀

 

다른 수강생 분들을 위해 이렇게 유틸함수까지 만들어서 공유해주시는 모습 너무 너무 좋습니다 👍

 

강의중 언급을 드리진 않았지만 splitText와 비슷하며 무료로 사용할 수 있는 패키지가 있습니다.

 

split-type 이라는 패키지 이며 패키지 설명에서도 splitText에서 영감을 얻어 만들었다고 적혀있고 실제로 사용방법도 동일하며 무료 라이선스로 사용이 가능하니 사용해보시면 좋을 것 같습니다.

image

학습하시면서 다른 재밌는 공부 방법과 꿀팁들이 있다면 언제든지 커뮤니티에 공유해주세요

 

감사합니다 :)