CODE
!! unpkg 글자 분리 라이브러리 추가
wp_register_script( ‘unpkg’, ‘https://unpkg.com/split-type’, array(), false, true );
wp_register_script( ‘unpkg’, ‘https://unpkg.com/split-type’, array(), false, true );
const targets = gsap.utils.toArray(".split");
targets.forEach((target) => {
let SplitClient = new SplitType(target, { type: "lines, words, chars" });
let lines = SplitClient.lines;
let words = SplitClient.words;
let chars = SplitClient.chars;
gsap.from(words, {
yPercent: 100,
opacity: 0,
duration: 1,
ease: "circ.out",
stagger: {
amount: 1,
from: "random"
},
scrollTrigger: {
trigger: target,
start: "top bottom",
end: "+=400",
markers: true,
}
});
});
글자를 분리하고 단어 또는 글자, 라인별로 등장 효과를 적용하기
글자를 분리하고 단어 또는 글자, 라인별로 등장 효과를 적용하기