// 01 텍스트 분리하기
let text = document.querySelector(".split");
let splitText = text.innerText;
let splitWrap = splitText.split("").join("");
text.innerHTML = splitWrap = "" + splitWrap + "";
// 02. 모든 텍스트 분리하기
document.querySelectorAll(".split").forEach(text => {
let splitWrap = text.innerText.split("").join("");
text.innerHTML = "" + splitWrap + "";
text.setAttribute("aria-label", text.innerText)
})
// 03. 모든 텍스트 분리하기 : 여백 표현하기
document.querySelectorAll(".split").forEach(text => {
let theText = text.innerText;
let newText = "";
for(let i=0; i {
gsap.from(text.querySelectorAll("span"), {
yPercent: 100,
autoAlpha: 0,
duration: 1,
ease: "circ.out",
stagger: {
amount: 1,
from: "random"
},
scrollTrigger: {
trigger: text,
start: "top bottom",
end: "+400",
markers: true
}
});
})
// 04. split-ytpe 사용하기
const target = gsap.utils.toArray(".split");
target.forEach(target => {
let splitClient = new SplitType(target, {type: "line, word, char"});
let lines = splitClient.lines;
let words = splitClient.words;
let chars = splitClient.chars;
gsap.from(chars, {
yPercent: 100,
opacity: 0,
rotation: 30,
duration: 0.7,
stagger: 0.031,
scrollTrigger: {
trigger: target,
start: "top bottom",
end: "+400",
markers: true
}
})
});