조회 수 158 추천 수 0 댓글 0

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

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

 

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를 사용한 것입니다.

    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

List of Articles
번호 제목 글쓴이 날짜 조회 수
57 HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때 팔공산 2019.03.01 68
56 CSS 말줄임 처리하기 file 팔공산 2018.11.13 150
55 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 팔공산 2018.09.26 149
54 DIV 영역 자체에 링크 거는 방법 file 팔공산 2018.09.23 103
53 DIV 화면 정중앙에 박스 배치하기 file 팔공산 2018.09.19 86
52 DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; ) file 팔공산 2018.09.19 116
51 커서(cursor) 모양 정리 file 팔공산 2018.07.19 70
» webkit-animation 적용 방법 file 팔공산 2018.01.31 158
49 각종 css3를 자동으로 만들어주는 사이트 팔공산 2017.11.07 279
48 html에 사용되는 Character Entities(특수기호) file 팔공산 2017.11.04 142
47 이미지 마우스 hover시 좌우 기울이기 file 팔공산 2017.10.27 185
46 모바일웹에서 스마트폰으로 전화바로연결 코드 file 팔공산 2017.06.16 845
45 반응형 CSS 테이블 file 팔공산 2017.06.13 541
44 실시간 환율조회 html file 팔공산 2017.04.18 310
43 HTML 만으로 마우스오버 구현하는 방법 1 file 팔공산 2017.01.07 4513
42 <div> 와 같은 블록 요소를 가운데 정렬하는 방법 팔공산 2016.12.26 766
41 float 속성을 가진 div 100% 설정하는 방법 file 팔공산 2016.04.21 341
40 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 1284
39 CSS3 border-radius 이해하기 file 팔공산 2016.04.07 238
38 IE 버젼별로 css 따로 적용하는 방법 file 팔공산 2011.02.17 11595
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...