AOS와 jQuery로 만드는 텍스트 애니메이션 효과 | 웹사이트에 생동감을 더하는 방법

CSS 25.04.07

텍스트 하나하나에 개별 애니메이션을 주는 방법

웹사이트의 타이틀이나 섹션 제목에 생동감을 주고 싶을 때,

간단한 애니메이션 효과만으로도 방문자의 시선을 사로잡을 수 있습니다.

이번 포스팅에서는 AOS (Animate On Scroll) 라이브러리와 jQuery를 이용해,

텍스트를 한 글자씩 분리하여 개별적으로 애니메이션을 적용하는 방법을 소개합니다.

➰➰➰

✏️왜 AOS + jQuery 조합이 좋은가요?

✅AOS (Animate On Scroll) 는 스크롤 기반의 애니메이션을 손쉽게 구현할 수 있는 오픈소스 라이브러리입니다.

CSS 트랜지션을 기반으로 하며, 속성만 추가하면 작동하기 때문에 가볍고 간단합니다.

✅jQuery는 텍스트를 글자 단위로 쪼개고, 각 글자에 data-aos 속성을 삽입하는 데 유용합니다.

이 두 가지를 결합하면 코딩이 복잡하지 않으면서도 디자인 퀄리티를 끌어올릴 수 있는 UI 요소를 쉽게 만들 수 있어요.

HTML 구조

<article id="inc02">
  <div class="tit">
    <h3 class="cate_title">OUR PROJECT</h3>
  </div>
</article>

Colored by Color Scripter

cate_title 이라는 클래스의 텍스트를 타겟팅해서 각각의 글자에 애니메이션을 넣습니다.

CSS 스타일

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
import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed&display=swap');
:root {
  --primary: #f37320;
  --e-font: 'Sofia Sans Extra Condensed';
}
.cate_title {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--e-font);
  color: var(--primary);
}
[data-aos="custom-blur-scale"] {
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.6);
  transition-property: filter, opacity, transform !important;
}
[data-aos="custom-blur-scale"].aos-animate {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}
Colored by Color Scripter
cs

JavaScript 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- jQuery & AOS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
 
<script>
  $(document).ready(function () {
    AOS.init();
 
    const $inc02_title = $("#inc02 .cate_title");
    const inc02_text = $inc02_title.text().trim();
    let inc02_newHtml = "";
 
    inc02_text.split("").forEach((char, index) => {
      let delay = index * 50;
      inc02_newHtml += `<span data-aos="custom-blur-scale" data-aos-duration="400" data-aos-delay="${delay}">${char}</span>`;
    });
 
    $inc02_title.html(inc02_newHtml);
  });
</script>
 
Colored by Color Scripter
cs

✏️ 활용 팁

✅브랜드명 강조 : 브랜드 이름이나 서비스 키워드에 활용하면 주목도를 높일 수 있습니다.

✅첫 화면 히어로 타이틀에 적용하면 방문자의 시선을 사로잡는 효과.

✅스크롤 시점 조절을 위해 AOS의 offset, once, anchor-placement 등을 추가로 설정할 수 있어요.

✅폰트 조합도 중요합니다. 글자가 잘 보이고 움직임이 부드러워 보이도록 폰트를 매칭해보세요.

[예제]

See the Pen text aos blur by designkits (@designkits) on CodePen.

텍스트에 애니메이션을 주는 건 단순한 기술 이상의 힘이 있습니다.

브랜드 메시지를 강조하고, 사용자의 몰입감을 높이며, 디자인을 더욱 감각적으로 만들어줍니다.

이제 단순한 텍스트 대신, 살아있는 타이틀을 사용해보세요. 작은 디테일이 브랜드의 인상을 결정합니다.

블로그 전체목록

최근 포스트