CSS 애니메이션 효과 적용하기
6,979
2015.10.26 00:10
첨부파일
-
- 첨부파일: animate_1.zip (277.7K)20 2015-10-26 00:10:20
관련링크
-
172회 연결
-
176회 연결
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=1y6 주소복사
본문
안녕하세요. 이윰MOUNT 입니다. ^^
사이트를 제작 또는 운영하다보면 특정 글자나 특정 영역을 강조해야 될 때가 있습니다.
물론 색상이나 크기를 강조하여 돋보이게 할수도 있지만, 동적인 애니메이션 효과를 주면 많은 내용중 특정 영역 또는 해당글자를 바로 직관적으로 돋보이게 할수 있는 이점이 있으며, 활용하기에 따라 다양한 요소에 접목할수 있습니다.
이런 동적인 애니메이션 효과를 CSS를 이용하여 표현할 수 있으며, 앞으로 CSS는 비약적으로 발전하리라 예상됩니다. (단, 익스9 이하 버전에서는 해당 CSS 애니메이션 효과를 지원하지 않으므로 참고하여 주세요.)
그런데, CSS를 이용하여 이런 애니메이션 효과를 하나하나 원리부터 알려드리기에는 너무 지겨워 질수 있는데…
오늘은 해외 웹디자이너중 Daniel Eden이라는 분이 배포하는 괜찮은 CSS 애니메이션 플러그인이 있어 그 활용법에 대해 알려드리고자 합니다.
사용법은 아주 단순하기 때문에 잘 모르시는 분들도 금방 따라 하실수 있으리라 봅니다.
우선 제가 간단하게 아래 링크와 같이 페이지를 만들어 보았습니다.
http://theme.eyoom.net/study/css/animate_1/index.html
본문 상단에 animate_1 파일을 다운로드 받으셔서, animate_1 폴더내 index.html 파일을 이용중인 브라우저로 열어보면 링크와 동일하게 그림과 같은 화면이 출력되며,
처음 페이지 로딩시 애니메이션 효과를 보실 수 있습니다. (다시 볼려면 ‘효과 다시보기’ 버튼을 클릭)
이 페이지는 예시로 보여드리기 위해 각 텍스트 및 영역에 애니메이션 효과를 각각 넣어준 준 것이고, 너무 남용하면 안좋겠죠.
index.html 파일을 열어보면 아래와 같은 소스를 볼수 있습니다.
<link rel="stylesheet" href="./css/normalize.css"> <link rel="stylesheet" href="./plugins/animate/animate.min.css"> </head> <body> <header class="sample-header"> <h4 class="animated tada"><strong>Eyoom Builder 의 앞선생각으로</strong></h4> <p class="animated flash">상상 그 이상의 세상을 만들겠습니다.</p> </header> <div class="sample-content-box animated bounce"> <p><strong>우리의 내일을 함께 만들겠다는 꿈</strong><br><br></p> <p>그 꿈에 대한 열정으로 항상 앞선생각과 실천하는 행동을 보여드리며 더 큰 내일을 만들어가는 기업이 될 것을 약속 드립니다.</p> </div> <div class="sample-content-img"> <img src="./image/eyoom_img.jpg" class="animated pulse" alt="eyoom_img"> </div> <div class="sample-reload-btn"> <a href="javascript:window.location.reload(true);">효과 다시보기</a> </div> </body>
여기서 중요한건 <link rel="stylesheet" href="./plugins/animate/animate.min.css”>파일을 불러와서
body 내 각각 태그의 클래스에 animated라는 클래스와 tada, flash, bounce, pulse등과 같은 애니메이션 클래스가 들어간것으로 애니메이션 효과를 구현할 수 있습니다.
아주 간단하죠.^^
이외에도 다양한 애니메이션 효과가 있는데 아래 링크를 클릭하면 각각의 애니메이션 효과를 볼수 있도록 만들어 놓았습니다.
http://eyoom.net/page/?pid=animations
이윰빌더 기본테마 중 하나인 pc_basic 테마에 적용하실려면
1. 상단에서 다운받은 animate_1 폴더 내 /plugins/animate 폴더를 pc_basic 테마 내 plugins 폴더안에 넣어줍니다.
2. pc_basic 테마 내 /layout/head_pc.html 파일을 열어 상단 php 코드내
add_stylesheet('<link rel="stylesheet" href="../plugins/animate/animate.min.css" type="text/css" media="screen">',0);
소스를 추가합니다.
3. 효과를 적용할 영역의 태그에 class="animated 애니메이션종류" 를 넣어주면 페이지 로딩시 또는 script 특정 이벤트 발생시 효과적용이 됩니다.
다른 테마들도 크게 틀리지 않으니 위와 같은 방법으로 적용하시면 될것 같습니다.
CSS는 어렵게 느껴질수 있지만 알면 알수로 아주 재미있는 언어이기도 합니다. 이 글에서 CSS의 기본 개념에 대해 알려드린건 아니지만 이미 만들어진 CSS를 활용하여 좀 더 친숙하게 다가가는 것만으로도 의미가 있지 않나 싶습니다.
그럼 이만 줄이겠습니다. 감사합니다.
참고 : Daniel Eden의 animate.css - GitHub 배포페이지 : https://github.com/daneden/animate.css
2
좋아요!
2
레벨 5
경험치 2,707
Progress Bar 71%
- 가입일 : 2015-09-15 19:48:51
- 서명 : 안녕하세요. 이윰의 MOUNT입니다.
- 자기소개 :
Total 13건 1 페이지
| 번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
|---|---|---|---|---|---|
| 13 |
곡우
|
2016.11.22 | 13,424 | 0 | |
| 12 |
red123
|
2016.07.09 | 5,239 | 2 | |
| 11 |
이윰MOUNT
|
2015.11.20 | 5,227 | 0 | |
| 10 |
이윰EGG
|
2015.11.06 | 4,544 | 0 | |
| 9 |
이윰EGG
|
2015.10.30 | 2,458 | 0 | |
| 8 |
미니언즈
|
2015.10.28 | 1,489 | 0 | |
| 7 |
미니언즈
|
2015.10.28 | 1,469 | 0 | |
| 6 |
미니언즈
|
2015.10.27 | 2,245 | 1 | |
| 5 |
이윰IN
|
2015.10.27 | 4,998 | 1 | |
| 열람 |
이윰MOUNT
|
2015.10.26 | 6,980 | 2 | |
| 3 |
이윰IN
|
2015.10.25 | 2,117 | 0 | |
| 2 |
미니언즈
|
2015.10.25 | 1,379 | 1 | |
| 1 |
프리피피티
|
2015.09.23 | 2,465 | 0 |
댓글목록
비즈팔님의 댓글
다이나믹한 페이지 만들수 있을 것 같군요.^^
감사합니다.
축하합니다. 첫댓글 포인트 77포인트를 획득하였습니다.
크롱크롱님의 댓글
플래쉬 효과를 줄수 있어서 멋찌겠습니다..많이 연구해 보겠습니다...이윰님 멋지십니다.
축하합니다. 지뢰폭탄 포인트 5포인트를 획득하였습니다.
야호님의 댓글
감사합니다!!
축하합니다. 행운의 포인트 88포인트를 획득하였습니다.
야호님의 댓글
!!
허비봉님의 댓글
요즘 이윰 분위기 너무너무너무너무 좋네요 ㅎㅎㅎㅎ
미니언즈님의 댓글
감사합니다.ㅎㅎ 덕분에 재밌는 홈페이지를 만들 수 있을 것 같아요.
이윰IN님의 댓글
웹분야에서 Macromedia사의 Flash의 등장은 웹 생태계마저 뒤흔드는 엄청난 사건 중에 하나였습니다.
액션스크립터 및 모션그래퍼라는 신생 직업군까지 생산해 내며 승승장구하였습니다.
향후 Adobe에서 Macromedia사를 인수하면서 그 발전 속도 및 가능성은 무궁무진할 것으로 생각을 했었지요.
현실은 예상과는 달리 모바일에서는 CPU 점유률이 높다는 이유 등으로
PC에서는 보안상 취약점의 이유 등으로 브라우저에서 마저 퇴출이 되어버립니다.
그동안 Flash가 차지한 자리를 이제는 HTML5 및 CSS가 서서히 대체해 나가고 있습니다.
정말 멋진 정보 및 자료입니다.
티보리님의 댓글
우와 감사합니다.
레오나르도님의 댓글
아주 재미있는 알짜 정보네요. 감사합니다.
joosam님의 댓글
정말 쓰임새가 많은 팁만 주시는군요... 고맙습니다~~
신비님의 댓글
멋진 팁이네요. 고맙습니다.