GSAP Text Effects

텍스트 효과 쇼룸

GSAP 기반 텍스트 등장 효과를 먼저 확인하고, 기존 K-Theme 텍스트 효과의 기본 마크업을 섹션별로 복사해서 사용할 수 있습니다.

  • .kt-tfx-color-primary
  • .kt-tfx-color-secondary
  • .kt-tfx-color-success
  • .kt-tfx-color-warning
  • .kt-tfx-color-danger
  • .kt-tfx-color-info
  • <span class="kt-highlight-sweep kt-tfx-color-secondary">

아래에서 부드럽게 나타납니다

01

Fade Up

.kt-gsap-fade-up

텍스트가 보이지 않는 상태에서 살짝 올라오며 등장합니다.

마크업
<p class="kt-gsap-fade-up">아래에서 부드럽게 나타납니다</p>
Delay
<p class="kt-gsap-fade-up" data-kt-gsap-delay="0.3">아래에서 부드럽게 나타납니다</p>

위에서 부드럽게 내려옵니다

02

Fade Down

.kt-gsap-fade-down

Fade Up 바로 아래에서 반대 방향의 등장 흐름을 확인합니다.

마크업
<p class="kt-gsap-fade-down">위에서 부드럽게 내려옵니다</p>
Delay
<p class="kt-gsap-fade-down" data-kt-gsap-delay="0.3">위에서 부드럽게 내려옵니다</p>

아래에서 또렷하게 올라옵니다

03

Slide Up

.kt-gsap-slide-up

Fade Up보다 이동감이 큰 방향성 있는 등장 효과입니다.

마크업
<p class="kt-gsap-slide-up">아래에서 또렷하게 올라옵니다</p>
Delay
<p class="kt-gsap-slide-up" data-kt-gsap-delay="0.3">아래에서 또렷하게 올라옵니다</p>

위에서 또렷하게 내려옵니다

04

Slide Down

.kt-gsap-slide-down

Slide Up의 반대 방향으로 내려오며 등장합니다.

마크업
<p class="kt-gsap-slide-down">위에서 또렷하게 내려옵니다</p>
Delay
<p class="kt-gsap-slide-down" data-kt-gsap-delay="0.3">위에서 또렷하게 내려옵니다</p>

원하는 텍스트만 선명하게 열립니다

05

Text Reveal

.kt-text-reveal

문장 안에서 강조할 단어나 구절만 감싸서 reveal 효과를 적용합니다.

마크업
<p>원하는 <span class="kt-text-reveal">텍스트만</span> 선명하게 열립니다</p>
Delay
<p>원하는 <span class="kt-text-reveal" style="--kt-tfx-delay: .3s; animation-delay: .3s">텍스트만</span> 선명하게 열립니다</p>

흐림에서 또렷함으로

06

Blur To Sharp

.kt-text-blur

GSAP filter 애니메이션으로 부드럽게 대체할 수 있습니다.

마크업
<p class="kt-text-blur">흐림에서 또렷함으로</p>
Delay
<p class="kt-text-blur" style="--kt-tfx-delay: .3s; animation-delay: .3s">흐림에서 또렷함으로</p>

필요한 문장을 입력합니다

07

Typing

.kt-text-typing + .kt-text-typing-align-left|center|right

AI, 예약, 검색, 상담 흐름을 보여줄 때 좋습니다.

마크업
<p class="kt-text-typing kt-text-typing-align-center">
  <span class="kt-type-line">필요한 문장을 입력합니다</span>
</p>
Delay
<p class="kt-text-typing kt-text-typing-align-center" data-kt-type-delay="600">
  <span class="kt-type-line">필요한 문장을 입력합니다</span>
</p>

방문자의 다음 행동을 안내합니다

08

Typing + Cursor

.kt-text-typing.kt-text-cursor + .kt-text-typing-align-left|center|right

CTA 직전 안내 문장이나 상품 데모 문구에 적합합니다.

마크업
<p class="kt-text-typing kt-text-cursor kt-text-typing-align-center">
  <span class="kt-type-line">방문자의 다음 행동을 안내합니다</span>
</p>
Delay
<p class="kt-text-typing kt-text-cursor kt-text-typing-align-center" data-kt-type-delay="600">
  <span class="kt-type-line">방문자의 다음 행동을 안내합니다</span>
</p>

우리는 빠르게정확하게부드럽게꾸준하게 일합니다

09

Word Rotator

.kt-word-rotator

하나의 문장 안에서 핵심 형용사를 바꿔 보여줍니다.

마크업
<p class="kt-word-rotator">
  <span>우리는</span>
  <strong>
    <em>빠르게</em>
    <em>정확하게</em>
    <em>부드럽게</em>
    <em>꾸준하게</em>
  </strong>
  <span>일합니다</span>
</p>
Delay
<p class="kt-word-rotator" style="--kt-tfx-delay: .3s; animation-delay: .3s">
  <span>우리는</span>
  <strong>
    <em>빠르게</em>
    <em>정확하게</em>
    <em>부드럽게</em>
    <em>꾸준하게</em>
  </strong>
  <span>일합니다</span>
</p>

핵심 단어에 선을 긋습니다

10

Underline Draw

.kt-underline-draw

제목 안의 특정 단어를 조용히 강조합니다.

마크업
<h2>핵심 <span class="kt-underline-draw">단어</span>에 선을 긋습니다</h2>
Delay
<h2>핵심 <span class="kt-underline-draw" style="--kt-tfx-delay: .3s; animation-delay: .3s">단어</span>에 선을 긋습니다</h2>

중요한 표현이 지나가며 빛납니다

11

Highlight Sweep

.kt-highlight-sweep

프로모션, 성과 숫자, 짧은 보증 문구에 적합합니다.

마크업
<h2>중요한 <span class="kt-highlight-sweep">표현</span>을 강조합니다</h2>
Delay
<h2>중요한 <span class="kt-highlight-sweep" style="--kt-tfx-delay: .3s; animation-delay: .3s">표현</span>을 강조합니다</h2>
Strategy / Design / Launch / SupportStrategy / Design / Launch / SupportStrategy / Design / Launch / Support
12

Marquee Flow

.kt-marquee-flow

섹션 구분, 브랜드 키워드, 긴 슬로건에 사용합니다.

마크업
<div class="kt-marquee-flow" aria-label="Strategy / Design / Launch / Support">
  <span>Strategy / Design / Launch / Support</span>
  <span>Strategy / Design / Launch / Support</span>
  <span>Strategy / Design / Launch / Support</span>
</div>
Delay
<div class="kt-marquee-flow" style="--kt-tfx-delay: .3s; animation-delay: .3s" aria-label="Strategy / Design / Launch / Support">
  <span>Strategy / Design / Launch / Support</span>
  <span>Strategy / Design / Launch / Support</span>
  <span>Strategy / Design / Launch / Support</span>
</div>

빛나는 그라데이션 텍스트

13

Gradient Text

.kt-gradient-text

테마 Primary와 Secondary 색상을 잇는 135° 그라데이션으로 핵심 단어를 강조합니다.

마크업
<h2><span class="kt-gradient-text">빛나는 그라데이션 텍스트</span></h2>
테마 색상
<h2><span class="kt-gradient-text" style="--kt-tfx-brand: var(--color-theme-primary-bg); --kt-tfx-secondary: var(--color-theme-secondary-bg)">빛나는 그라데이션 텍스트</span></h2>