SplitText를 순수 자바스크립트로 써봤어요
// 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에서 영감을 얻어 만들었다고 적혀있고 실제로 사용방법도 동일하며 무료 라이선스로 사용이 가능하니 사용해보시면 좋을 것 같습니다.
학습하시면서 다른 재밌는 공부 방법과 꿀팁들이 있다면 언제든지 커뮤니티에 공유해주세요
감사합니다 :)
아래 질문 (토이스토리 title에 있는 button에 링크 거는 법)에 대한 해결방법이 이게 맞을까요? 더 좋은 방법이 있으면 알려주세요
0
57
1
토이스토리 practice에서 "WATCH NOW"버튼에 대한 href 속성값을 변경하는 방법
0
45
1
motionpath 플러그인에서 align의 자세한 역할 궁금합니다
1
80
2
선생님 알려주신 내용을 기반삼아 구현하고 싶은 UI가 있습니다.
1
197
2
set에 대해서 궁금증.
1
179
2
set에 대해서
1
143
2
gsap.set 은 어디에서 처음 배우는가요?
2
202
2
섹션 0, 버그와 리팩토링에서 아이콘 클릭시 진행률을 알아올 수 있나요??
1
146
1
GSAP 가이드 Part.02 강의 > 01 > practice html 맨처음 시작시 강의랑 동일하지 않을 경우
1
240
2
advanced 수업자료 문의
2
220
1
duration과 stagger
1
246
1
이미지 관련 사이트 문의드립니다.
1
215
1
노션 링크는 어디에 있는지 문의 드립니다~
1
369
1
.left는 quickTo를 쓰지 않는 이유
2
344
1
[3D 텍스트효과(2)] GSAP을 위한 애니메이션 Timeline flow"기획", 이렇게 하면 될까요?
1
514
1
map으로 배열을 만들지 않아도 괜찮을까요?
1
333
1
애니메이션 재생헤드를 처음으로...
2
307
1
forEach안에서 gsap을 사용할 때 이벤트가 한번밖에 안걸리는 문제
1
626
1
gsap.set() vs gsap.default()
1
361
1
dragger에서 #timeline이 드래그 되는 이유
1
234
1
강의 보던중 사용중인 툴이 궁금해서 여쭤봅니다.
1
340
1
안녕하세요 수업자료를 다운받았는데 중간중간 파일이 없어요 ㅠㅠ
1
404
1
안녕하세요 이렇게 나오는데..
1
415
1
이후에 출시될 강의엔 유료 플러그인이 사용되나요?
1
291
1