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

 

 

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

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

 

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

 

코드 예제

 

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'을 박스를 설정하지 않으면 어떻게 될까요?

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

 

---

Animate.css 사용 방법 보러가기

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