해결된 질문
작성
·
446
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에서 영감을 얻어 만들었다고 적혀있고 실제로 사용방법도 동일하며 무료 라이선스로 사용이 가능하니 사용해보시면 좋을 것 같습니다.
학습하시면서 다른 재밌는 공부 방법과 꿀팁들이 있다면 언제든지 커뮤니티에 공유해주세요
감사합니다 :)