split-type을 활용한 한 글자씩 나타나는 텍스트 효과 예제

CSS 24.05.20

Split-Type은 텍스트를 개별 글자, 단어, 줄 단위로 쉽게 분리하여 애니메이션 효과 등을 적용할 수 있게 해주는 JavaScript 플러그인입니다.

유연한 텍스트 조작

글자, 단어, 줄 단위로 텍스트를 분리하여 다양한 애니메이션과 스타일 적용이 가능합니다.

간단한 사용법

간단한 코드로 복잡한 텍스트 애니메이션을 구현할 수 있어 개발 시간과 노력을 절감합니다.

디자인 개선

정교한 텍스트 애니메이션을 통해 웹사이트의 시각적 매력을 높이고 사용자 경험을 향상시킵니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script src="https://unpkg.com/split-type"></script> // split-type 플러그인 
 
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(chars, {
yPercent: 100, // 문자가 아래에서 위로
autoAlpha: 0, // 점차 나타나게
duration: 1, // 애니메이션 1초동안
ease: "circ.out", // 곡선 형태로 부드럽게 조정
stagger: {
amount: 1,
from : "random"
},
scrollTrigger: {
trigger: target,
start: "top bottom",
end: "+=400",
markers: false
}
});
});
Colored by Color Scripter
cs

[예제]

See the Pen Untitled by designkits (@designkits) on CodePen.

목록으로

최근 포스트

Design Kits Blog