안녕하세요 무택입니다 :)
오늘 알아보려고 하는 기능은 퍼블리싱하는데 시간 절약을 도와주는 animate 라이브러리를 알아보려고 합니다. 퍼블리싱하는 데 있어서 정적인 웹보다 동적인 웹이 UX에 있어서 더 좋은 환경이라는 건 많은 분들이 알고 계실 겁니다. 그런 동적인 웹을 만드는 데 있어서 많은 도움을 주는 라이브러리니까 아래 설명을 보고 활용해 보면 좋을 것 같습니다😉
Animate 라이브러리란?
animate 라이브러리는 다양한 모션을 템플릿 형식으로 만들어서 웹사이트 퍼블리싱 할 때 쉽게 모션을 넣게 해주는 라이브러리입니다. 해외에서 만든 모션들이기 때문에 국내 페이지 개발에 사용할만한 모션이 많지는 않지만 적절한 상황에 넣으면 좋은 효과를 낼 수 있는 모션들이 많아서 퍼블리싱하면서 적절한 상황에 모션들을 넣어주면 좋습니다.
웹사이트 구성
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
animate.style
위 사이트에 들어가서 페이지를 보면 구성이 아래처럼 나와있는 걸 볼 수 있습니다.
1번은 모션이 어떻게 나오는지 보여주는 곳이고 2번은 모션 종류입니다. 아무거나 클릭해 보면 1번의 텍스트에 모션이 적용되는 걸 확인할 수 있습니다. 그 아래에 3번은 설치 및 사용 방법에 대한 내용입니다.
보통 어떤 모션을 적용할지 찾을 때 2번의 모션들을 클릭해 보고 적당한 모션을 찾아 적용하는 식으로 작업을 진행합니다.
설치 방법
1. CDN 방식
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>CDN 방식으로 설치를 하려면 위 '<link>'코드를 <head></head> 사이에 넣으면 설치가 됩니다.
2. 로컬 방식
로컬 방식은 위 파일을 다운받아서 FTP 폴더에 넣고 경로로 불러오면 설치가 됩니다.
적용 방법
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>모션 적용 방법은 적용할 요소에 클래스를 추가해 주면 됩니다. "animate__animated"는 이 요소에 모션을 적용할 거라는 코드이고 뒤의 "animate__bounce"와 "animate__delay-2s"는 모션 이름, 딜레이 옵션을 설정해 주는 코드입니다.
모션을 적용하기 위해서는 반드시 "animate__animated"코드가 클래스에 들어가야 활성화됩니다.
정리하자면 첫 번째로 css파일이 작업하려는 파일(html 파일)에 불러와져있어야 하고, 두 번째로 적용하려는 요소의 클래스에 "animate__animated"가 들어가 있어야 합니다.
옵션값 설정 방법
세부 옵션을 설정하는 방법으로는 ":root"로 설정하는 방법과 요소의 클래스에 직접 적용하는 방법 두 가지가 있는데 ":root"로 설정하는 건 모션을 적용할 요소들의 기본 설정을 정할 수 있습니다. 그리고 클래스에 직접 적용하는 방법은 특정 요소에 디테일하게 옵션을 설정해 줄 수 있습니다.
1. root 설정 방법
:root {
--animate-duration: 100ms; /*애니메이션(ani) 실행 시간*/
--animate-delay: 200s; /*ani 실행 지연 시간 설정*/
}CSS에 위 코드를 넣고 모션 시간(duration)과 지연 시간(delay)을 설정하면 모션을 적용한 요소들의 위에서 적용한 설정값대로 적용이 됩니다.
2. 클래스에 적용
<h1 class="animate__animated animate__fadeInUp animate__slow ">M. Cloud Bridge</h1>HTML에서 모션 적용할 요소에 위처럼 클래스 이름으로 적용해 줍니다. 그러면 요소들마다 옵션을 다르게 줄 수 있게 됩니다.
# 추가할 수 있는 클래스
아래표의 클래스 이름을 적용하려는 요소의 클래스에 추가하면 적용이 되는 예시입니다.
a. 모션 시간(duration)
-
| 클래스 이름 | duration 적용 시간 |
| animate__slow | 2s |
| animate__slower | 3s |
| animate__fast | 800ms |
| animate__faster | 500ms |
b. 지연 시간(delay)
-
| 클래스 이름 | delay 적용 시간 |
| animate__delay-2s | 2s |
| animate__delay-3s | 3s |
| animate__delay-4s | 4s |
| animate__delay-5s | 5s |
c. 반복 횟수
-
| 클래스 이름 | 반복 횟수 |
| animate__repeat-1 | 1 |
| animate__repeat-2 | 2 |
| animate__repeat-3 | 3 |
| animate__infinite | infinite(무한) |
codepen 예시
See the Pen animate 라이브러리 by TytanLee (@TytanLee) on CodePen.
여기까지 animate.css 라이브러리에 대해 알아봤습니다. 보면서 모르는 부분이 있거나 궁금한 내용이 생기면 댓글로 달아주시면 답글 달아드리도록 하겠습니다.
'🧑💻개발 > 라이브러리' 카테고리의 다른 글
| [API 오류] 카카오 지도 간단하게 오류 해결 방법(VScode 라이브서버) (0) | 2023.07.03 |
|---|---|
| [API]카카오 지도를 간편하게 불러오는 방법 (0) | 2023.06.29 |
| 박스 안에서 텍스트 올라오는 애니메이션(animate 라이브러리 활용) (0) | 2023.05.02 |
| [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer)+코드 간소화 (0) | 2023.04.02 |
| [라이브러리]스크롤시 부드럽고 천천히 이동시키기(jQuery smoothwheel, scrooth) (0) | 2023.03.21 |
