박스 안에서 텍스트 올라오는 애니메이션(animate 라이브러리 활용)

 

 

안녕하세요 무택입니다 :)

오늘 알아볼 기능은 박스 안에서 텍스트가 올라오는 기능입니다. 최근 웹사이트에 사용되는걸 자주 보는 기능인데 말로 설명하는 것보다 아래에서 사례를 바로 알아봅시다.

 

기능을 적용하려면 animate 라이브러리 사용법을 기본적으로 알아야합니다.

 

코드 예제

See the Pen 박스 안에서 텍스트 올라오기(animate라이브러리) + txt stroke/txt fill by TytanLee (@TytanLee) on CodePen.

 

HTML

-

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@900&display=swap" rel="stylesheet">

<div>
  <h1 class="animate__fadeInUp animate__animated">M. Cloud Bridge</h1>    
</div>

 

CSS

-

*{
  padding: 0;
  margin: 0;
  font-family: 'Prompt';
}
div{
  overflow: hidden;
}
h1{
  font-size: 84px;
  line-height:1;
  text-transform: uppercase;
  -webkit-text-stroke: 4px #000;
  -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: subpixel-antialiased;
}

 

적용 방법

1. HTML에는 link로 'animate.css'파일을 불러와 줍니다.

2. 적용할 텍스트 부분은 div로 감싸줍니다.

3. CSS에서 텍스트를 감싼 div는 'overflow: hidden' 값을 줍니다.

4. 텍스트에는 line-height: 1'을 넣어줍니다.

 

위 내용을 적용하면 박스에 텍스트가 올라오는 모션을 만들 수 있습니다.

 

 

여기서 중요한 옵션인 'overflow: hidden'을 박스를 설정하지 않으면 어떻게 될까요?

See the Pen 박스 안에서 텍스트 올라오기(animate라이브러리) + txt stroke/txt fill_2 by TytanLee (@TytanLee) on CodePen.

이처럼 그냥 animate 기능만 나오게 됩니다.

 

---

Animate.css 사용 방법 보러가기

[라이브러리]다양한 애니메이션을 간단하게 사용해보자(animate.css)