에티테마

Animate.css 애니메이션 효과

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 작성일 19-03-20 20:36
라이센스 라이센스를 입력하지 않았습니다 파일내 포함되어 있는 문서를 참고해주세요.
데모 데모 (2296)
다운로드 다운로드 (0)
개발사

본문

이미 완성된 홈페이지내에 애니메이션 효과를 낼 수 있습니다.

jquery 형식으로 제작되거나 css 형식으로 그대로 제공 됩니다.

몇가지 사용방법이 있습니다.


[CDN 주소]

<head>

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

</head>​


[JQUERY 방식]

$('#yourElement').addClass('animated bounceOutLeft');


// See https://github.com/daneden/animate.css/issues/644

var animationEnd = (function(el) {

  var animations = {

    animation: 'animationend',

    OAnimation: 'oAnimationEnd',

    MozAnimation: 'mozAnimationEnd',

    WebkitAnimation: 'webkitAnimationEnd',

  };


  for (var t in animations) {

    if (el.style[t] !== undefined) {

      return animations[t];

    }

  }

})(document.createElement('div'));


$('#yourElement').one(animationEnd, doSomething);​


[CSS 방식]


<div class="animated bounce delay-2s">Example1</div>

위에 보시는것처럼 animated bounce delay-2s​ 클래스값만 넣어줘도

해당 div 에 바운스 되는 효과를 적용할 수 있습니다.


Class Name Delay Time

delay-2s 2s

delay-3s 3s

delay-4s 4s

delay-5s 5s


또는

<div class="animated bounce faster">Example2</div>

위처럼도 사용이 가능합니다.


Class Name Speed Time

slow       2s

slower 3s

fast       800ms

faster 500ms



[애니메이션 효과 클래스명]

bounce

flash

pulse

rubberBand

shake

headShake

swing

tada

wobble

jello

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

hinge

jackInTheBox

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

heartBeat​


  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

첨부파일

댓글목록

등록된 댓글이 없습니다.

Total 41건 1 페이지

카테고리

카테고리
라이브러리