🎨 Animate.css - 애니메이션을 클래스로 간편하게 사용

...

Animate.css

Animate.css는 css의 애니메이션 효과들을 라이브러리화 하여 누구나도 css 깊을 지식 없이 사용하기 쉬운 애니메이션 라이브러리 이다.

예를들어 부트스트랩이 css 디자인 템플릿을 클래스로 설정한다고 하면, 이건 애니메이션 부트스트랩 이라고 보면 된다.

Html 엘리먼트에 클래스명만 부여하면 고퀄리티의 애니메이션 효과를 적용할수가 있어 사용하기 편하게 구성되어 있다.

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

$ npm install animate.css --save

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

설치는 노드 패키지와 cdn을 제공한다.

animate.css 사용법

<h1 class="animate__animated animate__bounce">An animated element</h1>

기본적으로 animate__animated 클래스를 부여해, 애니메이션 라이브러리를 인식시키고 그 뒤에,

animate__애니메이션명 을 써주는 형태이다.

각 애니메이션 이름들은 여기서 동작과 함꼐 확인할수 있다.

다음과 같이 다양한 유틸리티 제어 클래스들을 이용해 애니메이션을 세세히 조정할 수 있다.

공식문서를 참고하자.

<div class="animate__animated 
			animate__bounce 
            animate__delay-2s 
            animate__faster
            animate__repeat-2"
            >
  Example
</div>

동적 딜레이 구현

만일 애니메이션을 지정했는데 딜레이를 주고 싶다면, animate_delay-2s를 주면되는데, 만일 소수 초 단위로 조절하거나 동적으로 관리하고 싶을 때에 다음과 같이 사용하면 된다.

let num = 0.5;
document.querySelectorAll('.aniview_card').forEach((el)=>{
  // 각 엘리먼트의 animation-delay를 0.5, 1.0, 1.5 ~ 차례로 준다.
  el.style.setProperty('animation-delay', `${num}s`);
  num += 0.5;
})

animate.css 자바스크립트로 사용하기

html에 그대로 사용해버리면, 문서가 로드되자마자 애니메이션이 실행되버리게 된다.

버튼 클릭과 같은 사용자 동작과 함께 애니메이션을 제어하고 싶으면, 클래스 추가제거를 통해 구현할 수 있다.

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft'); // 엘리먼트에 애니메이션 클래스 부여

// animate__animated클래스를 부여하면 자동으로 등록되는 커스텀 이벤트
element.addEventListener('animationend', () => {
  // 애니메이션 실행이 끝나면 함수 실행
});

공식문서에선 따로 helper함수를 제공한다.

/* animateCSS() 라는 함수 생성 */
const animateCSS = (element, animation, prefix = 'animate__') =>
   // We create a Promise and return it
   new Promise((resolve, reject) => {
      const animationName = `${prefix}${animation}`;
      const node = document.querySelector(element);

      node.classList.add(`${prefix}animated`, animationName);

      // When the animation ends, we clean the classes and resolve the Promise
      function handleAnimationEnd(event) {
         event.stopPropagation();
         node.classList.remove(`${prefix}animated`, animationName);
         resolve('Animation ended');
      }

      node.addEventListener('animationend', handleAnimationEnd, { once: true });
   });


/* 함수 사용 */
animateCSS('.my-element', 'bounce'); // 선택자 와 애니메이션 명을 써주면 된다.

animateCSS('.my-element', 'bounce')
.then((message) => {
  // 콜백 실행도 가능하다.
});

jQuery AniView

이 라이브러리는 스크롤 이벤트에 animate.css 애니메이션이 작동하도록 하는 플러그인이다.

재치있는 웹사이트를 만드는데 좋다.

jQuery AniView

jQuery AniView is a minimal (~1KB) jQuery plugin that allows you to add animations to your webpages with nothing more than a class identifier and a single data attribute. There are also a couple of optional... options. Scroll down to see how it works!

jjcosgrove.github.io

AniView 사용법

<!DOCTYPE html>
<html>
<head>
    <!-- animate.css를 먼저 로드 -->
    <link type="text/css" rel="stylesheet" href="animate.css">
    <!-- 제이쿼리 로드 -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <!-- aniview 로드 -->
    <script type="text/javascript" src="jquery.aniview.js"></script>
</head>
<body>
    <div>
    	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <!-- data-av-animation="animate__애니메이션명" 속성을 엘리먼트에 등록 -->
        <p class="aniview" data-av-animation="animate__jackInTheBox">
            This is my awesome animated element using v4!
        </p>
    </div>
    
    <script>
        $(document).ready(function(){
        	// 해당 엘리먼트를 가져와 AniView() 실행
            $('.aniview').AniView({
                animateClass: 'animate__animated' // animate.css를 aniview에 등록
            });
        });
    </script>
</body>
</html>

See the Pen Scroll Animate.css 2 by ryohei (@intotheprogram) on CodePen.