Animate.CSS를 이용한 이미지, 문자 애니메이션 효과 주기
먼저 어떤 효과가 가능한지 예시를 보여 드리겠습니다.
(모바일 화면에서는 애니메이션이 정상 작동하지 않을 수 있습니다)
물론 텍스트도 애니메이션이 가능합니다.
전산직의 삶
사용 방법은 먼저 HTML 소스 수정에서 <HEAD>와 </HEAD> 사이에 아래 내용을(CSS) 추가해줘야 합니다.
| <head> <link rel="stylesheet" hrep="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" /> </head> |
다음은 적용할 이미지나 텍스트 앞에 class를 넣어 줍니다.
| <img class="animate__animated animate__bounce" href="이미지주소"> <h1 class="animate__animated animate__jackInTheBox">전산직의 삶</h1> |
적용 가능한 애니메이션의 종류가 다양합니다.
Animate.css 홈페이지에 가시면 종류를 확인 및 테스트 해보실 수 있습니다.
또한 애니메이션이 이뤄지기 전에 딜레이를 줄 수도 있습니다.
애니메이션이 몇 회 반복할지를 정할 수도 있고, 위에 예시처럼 무한 반복도 가능합니다.
세밀한 조정을 위해서는 해당 animate.css 파일을 설치 또는 다운받아 직접 값을 수정해서 사용 하시면 됩니다. CSS에 대해 잘 아신다면 직접 티스토리에 수정 후 올리신 후 그 주소를 링크해서 사용하시면 됩니다.
홈페이지에 가보시면 HTML태그뿐 아니라 JavaScript에도 이용가능한 것으로 나옵니다.
사용법 또한 설명되어 있습니다.
Animate.css
Animate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under. Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders,
animate.style
HTML5 CSS JavaScript 전체보기
'HTML5 CSS JavaScript' 카테고리의 글 목록
전산 관련 경험을 기록 하는 곳
reddb.tistory.com
읽어주셔서 감사드리며, 블로그를 액티브하게 꾸미시는데 도움이 됐기를 빌겠습니다.
'HTML5 CSS JavaScript' 카테고리의 다른 글
| 자바스크립트 ES6 문법 - 전개 연산자 (0) | 2022.02.21 |
|---|---|
| 자바스크립트 ES6 문법 - 템플릿 문자열 (0) | 2022.02.21 |
| 티스토리 사이드바 시계 추가하기 (0) | 2020.07.17 |