메뉴 건너뛰기

MH

내 사랑치 않고 끝내는 것 보다 사랑해서 잃어 버리는 편이 좋다.

It is better to have loved and lost than to have never loved at all.

조회 수 21 추천 수 0 댓글 0
Extra Form
원작자 80san
적용여부 적용
적용페이지 https://moonhouse.co.kr/top

레이아웃이나 기타 다른 부분에도 에니메이션 효과를 쉽게 적용하는 방법입니다.

 

https://moonhouse.co.kr/423394

https://moonhouse.co.kr/433413

위 사이트를 먼저 보고 오면 도움이 됩니다.

 

https://daneden.github.io/animate.css 사이트에 접속해 보면img_002.jpg  

효과 이름이 있고 "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)

img_001.jpg

 

조금 더 자세한 옵션을 부여 할려면 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;
}

Who's 팔공산

profile

이 世上에서 現在가 가장 중요한 時間이며,
내가 만나고 있는 바로 그 사람이 第一 중요한 사람이며,
同時에 가장 중요한 것은 그 사람에게 善으로서 行하는 것이다.

Atachment
첨부 '3'
    댓글이 하나도 없네요ㅠㅠ
    Tip이 도움이 되었다면 댓글과 평가 부탁합니다. Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.
?

List of Articles
번호 분류 제목 원작자 날짜 조회 수 적용여부
255 문하우스 Lightbox 적용 위젯에서 원본 파일 출력 file 80san 2019.09.22 9 적용
» 문하우스 에니메이션(-webkit-animation) 효과 쉽게 적용하는 방법 file 80san 2019.09.19 21 적용
253 Xe 위젯에 특정 카테고리글만 출력하기 file 앙띠2 2019.09.10 43 적용
252 문하우스 게시판으로 간단한 거래장부 만들기 file 80san 2019.03.27 197 NO
251 문하우스 호스팅 이전 하면서 /xe 떼고 SSL설치한 경험기 입니다. file 80san 2019.03.16 155 적용
250 문하우스 게시글보기 링크문구 바로가기 아이콘 출력 file 80san 2019.02.23 212 적용
249 문하우스 게시판 글쓰기시 Tag부분 출력 유무 설정방법 file 80san 2019.02.17 59 적용
248 문하우스 "드래그하여 페이지/문서 이동 애드온" 적용팁 5 file 80san 2019.02.14 299 적용
247 XE타운 XE 위젯을 반응형으로 적용하자 file 도토리묵 2018.12.31 150 변형
246 XE타운 댓글이 2줄 이상일 경우 접고 펴는 기능추가하기 file 이온디 2018.11.27 97 변형
245 문하우스 Sketchbook5 게시판 글작성시 상단에 빵조각메뉴 부분 삭제하기 file 80san 2018.11.02 125 적용
244 문하우스 Xedition 레이아웃 스킨에서 검색버턴 바꾸기 file 80san 2018.10.31 89 적용
243 문하우스 xedition레이아웃과 sketchbook5 게시판을 같이 사용시 미미한 문제점수정 file 80san 2018.10.27 98 적용
242 문하우스 구글 드라이브 자료링크를 XE게시판에 적용하는 방법 file 80san 2018.09.25 190 적용
241 XE타운 게시판 사용자정의 일자(연월일)에 시간 추가하는 방법 file sunup 2018.09.03 131 NO
240 XE타운 PC, 모바일, Tab 접속장치 구분 코드 file misol 2018.08.03 118 적용
239 XE타운 마지막 문장 이후 오는 <p> </p> 를 모두 제거해서 보여주는 방법 prologos 2018.07.28 75 적용
238 문하우스 구글 웹사이트 번역기 웹페이지에 간단하게 달기 file 80san 2018.07.27 295 NO
237 문하우스 이미지 Hover시 Zoom기능 출력 file 80san 2018.07.25 100 적용
236 기타 XE 위젯에 임시 저장글이 뜰때 해결방법 file 잡다한 생각 2018.07.13 48 적용
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...