메뉴 건너뛰기

MH

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

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

조회 수 158 추천 수 0 댓글 0
Extra Form
원작자 80san
적용여부 적용

css3를 지원하는 브라우즈에서 이미지나 문구를 에니메이션 처럼 꾸미는 방법으로 webkit-animation을 많이 사용합니다.

스케치북5 게시판에 댓글달기 추천 문구에 적용하는 방법을 소개합니다.

https://moonhouse.co.kr/396568 참조

 

1. skin.xml 에 추가

<var name="comment_induce_mid" type="text">
    <title xml:lang="ko">댓글 유도 mid</title>
    <title xml:lang="en">Comment Induce Mid</title>
    <description xml:lang="ko">댓글 유도 문구표시할 mid명</description>
    <description xml:lang="en">Comment Induce Mid</description>
</var>
<var name="comment_induce_text" type="textarea">
    <title xml:lang="ko">댓글 유도 문구</title>
    <title xml:lang="en">Comment Induce Text</title>
    <description xml:lang="ko">댓글 유도 문구를 작성하세요.</description>
    <description xml:lang="en">Comment Induce Text</description>
</var>

 

2. _read.html을 열어서 주황색 코드 추가

<!--// Editor -->
<!--@if($mi->cmt_wrt=='sns')-->
<!--// SocialXE -->
  -- 생략
<!--@else-->

 

<block cond="$mid==$mi->comment_induce_mid">
<div class="cmtInduce">
<!--@if ($oDocument->get('comment_count') <= 0 ) -->
    <ul class="
blink1" style="margin-bottom:10px; text-align:center"><i class="fa fa-quote-left" aria-hidden="true"></i> 댓글이 하나도 없네요ㅠㅠ <i class="fa fa-quote-right" aria-hidden="true"></i></ul>
<!--@end-->
    <ul class="
blink2" style="text-align:center"><img src="./img/induce.gif" /><i class="fa fa-quote-left" aria-hidden="true" style="margin-left:5px"></i> {$mi->comment_induce_text} <i class="fa fa-quote-right" aria-hidden="true"></i></ul>
</div>
</block>

 

<!--// Comment Write : Top -->

 

3. board.css 에 추가 

/* 댓글 유도창 */
.cmtInduce { background-color:#555555; font-size:1.0em; color:#fff; padding:5px; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px; margin-bottom:10px; }

이렇게 코드 추가하면 해당 게시판(mid)에 댓글이 없으면 "댓글이 하나도 없네요ㅠㅠ" 문구가 상단에 출력되고

아래에 게시판설정에 "댓글 유도 문구"글이 출력됩니다.

img_002.jpg

여기 까지만 적용해도 됩니다.

 

이 문구들에게 생명을 적용하는 방법이 webkit-animation입니다.

[webkit-animation 적용 설명]

-webkit-animation-name:Animation_01; //프레임에 정의한 name 값

-webkit-animation-delay:1s; //1초 정도 멈춘 후에 시작된다.

-webkit-animation-duration:2.0s; //애니메이션 실행 시간 2초

-webkit-animation-interation-count:infinite; //무한 반복

-webkit-animation-timing-function:ease-in-out; //키프레임간의 타이밍 정도 ease / ease-in / ease-in-out

-webkit-animation-direction:alternate  //플레이 상태값, normal 순방향 / alternate 역방향

 

위의  _read.html 소스에 class="blink1" 이 부분 board.css 에 추가

.blink1 {

-webkit-animation-name: blinker;

-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: ease-in-out;

-webkit-animation-duration: 2s;

-webkit-animation-timing-function:ease-in-out;

-webkit-animation-direction: alternate;

}

 

@-webkit-keyframes blinker
 0% { opacity: 0; }
 50% { opacity: 1; }
 100% { opacity: 0.5; }
 }

-webkit-animation-name: blinker;  프레임에 정의한 name 값입니다.

여기서 네임값 blinker는 코드를 작성하는 작성자가 임의의 이름값을 주면 됩니다.

 

위의 코드에서 초록색 부분 @-webkit-keyframes 에 작성자가 준 임의의 이름값을  blinker를 주고

{ 에니메이션 작동 코드 }를 작성하면 됩니다.

 

위의 코드의 에니메이션 은 

-webkit-animation-duration: 2s; 2초 동안

처음에 투명도가 0, 1초일때 투명도가 100%, 2초일때 투명도가 50% 

아래 댓글 유도문구중  "댓글이 하나도 없네요ㅠㅠ"가 위의 에니메이션이 적용 된 것입니다.

 

자! 그럼 효과를 2개를 동시에 적용하는 방법 class="blink2"

.blink2 {

-webkit-animation-name: blinker;

-webkit-animation-name: pulse;

-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);

-webkit-animation-duration: 5s;

-webkit-animation-timing-function:ease-in-out;

-webkit-animation-direction: alternate;

}

 

@-webkit-keyframes pulse {
 0% { background-color:black ; opacity: 1.0; -webkit-transform: scale(1.0) rotate(0deg); }
 33% { background-color:white ; opacity: 0.75; -webkit-transform: scale(0.9) rotate(-5deg); }
 67% { background-color:red ; opacity: 0.5; -webkit-transform: scale(1.1) rotate(0deg); }
 100% { background-color:green ; opacity: 1.0; -webkit-transform: scale(1.0) rotate(5deg); }

}

blinker 효과는 위에 설명했고,

pulse 효과는 5초동안 문구의

배경색상 - background-color: ;

투명도의 변화 - opacity: ;

크기 변화 - scale(1.0);100% 90% 110% 100%,

회전 - rotate(-5deg);

아래 댓글 유도 문구중  하단문구가 위의 에니메이션이 적용 된 것입니다.

 

에니메이션의 효과는 웹검색하시면 다영하게 나옵니다.

https://moonhouse.co.kr/select

페이지의 메뉴에 마우스hover시 화려한 효과도 webkit-animation를 사용한 것입니다.

Who's 팔공산

profile

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

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

List of Articles
번호 분류 제목 원작자 날짜 조회 수 적용여부
251 문하우스 호스팅 이전 하면서 /xe 떼고 SSL설치한 경험기 입니다. file 80san 2019.03.16 7 적용
250 문하우스 게시글보기 링크문구 바로가기 아이콘 출력 file 80san 2019.02.23 148 적용
249 문하우스 게시판 글쓰기시 Tag부분 출력 유무 설정방법 file 80san 2019.02.17 26 적용
248 문하우스 "드래그하여 페이지/문서 이동 애드온" 적용팁 5 file 80san 2019.02.14 74 적용
247 XE타운 XE 위젯을 반응형으로 적용하자 file 도토리묵 2018.12.31 52 변형
246 XE타운 댓글이 2줄 이상일 경우 접고 펴는 기능추가하기 file 이온디 2018.11.27 67 변형
245 문하우스 Sketchbook5 게시판 글작성시 상단에 빵조각메뉴 부분 삭제하기 file 80san 2018.11.02 88 적용
244 문하우스 Xedition 레이아웃 스킨에서 검색버턴 바꾸기 file 80san 2018.10.31 66 적용
243 문하우스 xedition레이아웃과 sketchbook5 게시판을 같이 사용시 미미한 문제점수정 file 80san 2018.10.27 73 적용
242 문하우스 구글 드라이브 자료링크를 XE게시판에 적용하는 방법 file 80san 2018.09.25 129 적용
241 XE타운 게시판 사용자정의 일자(연월일)에 시간 추가하는 방법 file sunup 2018.09.03 89 NO
240 XE타운 PC, 모바일, Tab 접속장치 구분 코드 file misol 2018.08.03 80 적용
239 XE타운 마지막 문장 이후 오는 <p> </p> 를 모두 제거해서 보여주는 방법 prologos 2018.07.28 54 적용
238 문하우스 구글 웹사이트 번역기 웹페이지에 간단하게 달기 file 80san 2018.07.27 67 NO
237 문하우스 이미지 Hover시 Zoom기능 출력 file 80san 2018.07.25 71 적용
236 기타 XE 위젯에 임시 저장글이 뜰때 해결방법 file 잡다한 생각 2018.07.13 26 적용
235 문하우스 외부링크 파일을 로그인회원만 확장변수활용 다운받게 하는 방법 file plruto 2018.02.17 200 적용
234 문하우스 Ckeditor에 스킨 설치하는 방법 file 80san 2018.02.13 268 NO
233 문하우스 Ckeditor에 플러그인 설치하는 방법 1 file 80san 2018.02.11 390 적용
» 문하우스 댓글유도문구에 에니메이션 효과 적용 80san 2018.01.31 158 적용
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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