-
[CSS3] Animate.css css로 애니메이션 효과를 매우 간편하게 사용하기퍼블리싱/HTML&CSS 2025. 1. 6. 15:14
웹 제작에 바로 사용가능한 크로스브라우징 라이브러리
Animate.css 를 이용하여 css 클래스로만 간단하게 효과를 줄 수 있다.
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. Animate.css 불러오기
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head>2. 원하는 요소에 클래스 명으로 효과주기
<div class="animate__animated animate__bounce"></div>2-2. 딜레이 클래스 추가하여 딜레이 주기.
<div class="animate__animated animate__bounce animate__bounce animate__delay-2s"></div>사용법이 홈페이지에 매우 자세하게 나와있으니 확인하면 된다.
위와 같이 작업을 하면 한가지 문제점은 스크롤 아래에 있는 요소들도 다같이 페이지 로드가 끝나고 바로 동작하기 때문에 스크롤을 내려 확인해볼 경우 정적으로 보여진다.
스크립트를 추가하여 수정한다.
3. 스크롤 위치에서 애니메이션 동작하게 하기
3-1. js
jQuery(function ($) { var $body = $('body'), $window = $(window); $('#content .animate__animated').addClass('ani-stop'); function scrollSection(){ var sT = $window.scrollTop(); var wH = $window.height(); $('#wrap').find('.px-motion').each(function(){ var t = $(this); var tT = t.offset().top; var tH = t.innerHeight(); var tD = 0; if(t.attr('data-delay')){ tD = t.attr('data-delay'); } if(tT-wH<sT-tD && tT+tH>sT){ t.find('.animate__animated').removeClass('ani-stop'); }else { t.find('.animate__animated').addClass('ani-stop'); } }); } var lastScrollTop = 0; $window.scroll(function(){ var sT = $(this).scrollTop(); if ($('.px-motion').length) { scrollSection(); } lastScrollTop = sT; }).trigger('scroll'); });스크롤 밖에 있는 .px-motion을 찾아 .px-motion 안에 있는 .animate__animated 들에게 .ani-stop 클래스를 준다.
3-2. css
.ani-stop{visibility:hidden;-webkit-animation-name:none !important;animation-name:none !important}3-3. html
<div id="content"> <div class="px-motion"> <div class="animate__animated animate__bounce"></div> <div class="animate__animated animate__bounce animate__bounce animate__delay-1s"></div> <div class="animate__animated animate__bounce animate__bounce animate__delay-2s"></div> </div> <div class="px-motion"> <div class="animate__animated animate__bounce"></div> <div class="animate__animated animate__bounce animate__bounce animate__delay-1s"></div> <div class="animate__animated animate__bounce animate__bounce animate__delay-2s"></div> </div> ... ... ... </div>부족한 부분은 css를 추가하여 작업하면 된다.
'퍼블리싱 > HTML&CSS' 카테고리의 다른 글
임시 이미지, 샘플 이미지, 대체 이미지(Placeholder Image) 퍼블리싱 작업에 편리한 사이트 (0) 2025.01.10 간단한 웹폰트 변환 사이트 (1) 2025.01.10 HTML5 video 자동재생 (0) 2019.06.05 CSS 단위 em과 rem (0) 2018.06.11 안드로이드 킷캣 4.4.2 웹뷰 css (0) 2018.06.07
