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)에 댓글이 없으면 "댓글이 하나도 없네요ㅠㅠ" 문구가 상단에 출력되고
아래에 게시판설정에 "댓글 유도 문구"글이 출력됩니다.
여기 까지만 적용해도 됩니다.
이 문구들에게 생명을 적용하는 방법이 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를 사용한 것입니다.