레이아웃이나 기타 다른 부분에도 에니메이션 효과를 쉽게 적용하는 방법입니다.
https://moonhouse.co.kr/423394
https://moonhouse.co.kr/433413
위 사이트를 먼저 보고 오면 도움이 됩니다.
https://daneden.github.io/animate.css 사이트에 접속해 보면
효과 이름이 있고 "Animate it"버턴을 눌러보면 해당 효과를 볼 수 있습니다.
[적용방법]
1. animate.css 파일을 다운받아서 적용을 원하는 레이아웃의 css폴더에 업로드합니다.
2. layout.html 에 animate.css를 로드합니다. 아래와 같이 편집합니다.
<load target="css/style.css" />
<load target="css/animate.css" />
3. style.css파일을 열어서 에니메이션을 적용하고 싶은 id나 class에 코드를 적용합니다.
id과 gnd인 메뉴 부분에 아래로 5초 동안 내려 오는 코드입니다.
#gnb { -webkit-animation-duration:5s; animation-duration:5s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-name:fadeInDown; animation-name:fadeInDown }
fadeInDown 이 부분에 적용하고 싶은 효과의 이름을 적어 넣으시면 됩니다.
.contentbox .sh { -webkit-animation-duration:5s; animation-duration:5s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-name:fadeInRight; animation-name:fadeInRight } .contentbox .notice { -webkit-animation-duration:10s; animation-duration:10s; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-name:flash; animation-name:flash }
<div class="contentbox">
{$content}
</div>
위의 코드는 {$content} 영역(위젯 추가영역) 안의 각각의 "위젯"이나 "내용직접추가" 설정에서 "위젯크기"의 "위젯 CSS class"부분에 class 이름을 적어 주고 효과를 지정하면 됩니다. (ex : .sh .notice)
조금 더 자세한 옵션을 부여 할려면 https://moonhouse.co.kr/423394 내용을 참조하시면 됩니다.
#menu li {
-webkit-animation-name:rollIn;
-webkit-animation-iteration-count:1;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction:normal;
-webkit-animation-fill-mode:forwards;
animation-name:rollIn;
animation-iteration-count:1;
animation-duration:3s;
animation-timing-function:ease-in-out;
animation-direction:normal;
animation-fill-mode:forwards;
}
Lightbox 적용 위젯에서 원본 파일 출력
위젯에 특정 카테고리글만 출력하기
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
