You cannot see this page without javascript.

메뉴 건너뛰기

MH

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

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

조회 수 110 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
Extra Form
원작자 80san
적용여부 적용

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

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

http://moonhouse.co.kr/xe/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);

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

 

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

http://moonhouse.co.kr/xe/select

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

어떠셨나요? 0.00 (0명)
0
0
0
0
0

Who's 팔공산

profile

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

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

List of Articles
번호 분류 제목 원작자 날짜 조회 수
240 XE타운 PC, 모바일, Tab 접속장치 구분 코드 XE에는 기본으로 불러오는 클래스 들이 많습니다. 그 중에 모바일 클래스를 조금 써봅니다. 파일 위치는 ./classes/mobile/Mobile.class.php 입니다. 이 파일에는... file misol 2018.08.03 14
239 XE타운 마지막 문장 이후 오는 <p> </p> 를 모두 제거해서 보여주는 방법 과도한 엔터가 문서 하단에 들어간걸 그냥 보통 지우지 않으시는 경우가 있는데요. 스킨에서 본문을 불러오면서 내용의 끝부분에 위치한 반복되는 &lt;p&gt;&amp;nbsp;&lt;/p&gt; ... prologos 2018.07.28 26
238 문하우스 구글 웹사이트 번역기 웹페이지에 간단하게 달기 XE 나 라이믹스에도 &quot;다국어&quot;기능이 있기는 하지만 번역이나 기타 여러 가지 번거로운 점이 많습니다. 자신이 확실하게 외국어 언어를 알고 있고 귀찮니즘을 극복... file 80san 2018.07.27 14
237 문하우스 이미지 Hover시 Zoom기능 출력 썸네일이미지를 사용하거나, 일반 이미지의 경우 큰이미지 작은이미지를 이용하여 이미지에 마우스 Hover시 이미지부분이 확대 Zoom 형태로 출력되게 하는 Tip입... file 80san 2018.07.25 11
236 기타 XE 위젯에 임시 저장글이 뜰때 해결방법 1) 최신글 위젯의 경우 widgets/newest_document/queries 에 위치한 getNewestDocuments.xml을 열어서 &lt;condition operation=&quot;equal&quot; column=&quot;modules.site_srl&quot; ... file 잡다한 생각 2018.07.13 8
235 문하우스 외부링크 파일을 로그인회원만 확장변수활용 다운받게 하는 방법 유틸리티 메뉴의 작성글들중 프로그램용량이 큰 자료의 경우 외부에서 파일을 가져와서 링크를 걸어 두었는데 이런 경우는 게시판의 파일권한과 상관 없이 다운로... file plruto 2018.02.17 169
234 문하우스 Ckeditor에 스킨 설치하는 방법 아래글에 이어서 Ckeditor에 스킨 설치하는 방법을 설명드립니다. https://ckeditor.com/cke4/addons/skins/all 에 가면 몇가지의 스킨들이 존재합니다. 그 중에 ... file 80san 2018.02.13 207
233 문하우스 Ckeditor에 플러그인 설치하는 방법 XE를 라이믹스로 변환시키고 나니 에디터기로 Ckeditor를 기본으로 사용하게 되어 있네요. XE에서 사용하던 xpresseditor에디터기는 사용이 불가하네요. 그래서 C... 1 file 80san 2018.02.11 269
» 문하우스 댓글유도문구에 에니메이션 효과 적용 css3를 지원하는 브라우즈에서 이미지나 문구를 에니메이션 처럼 꾸미는 방법으로 webkit-animation을 많이 사용합니다. 스케치북5 게시판에 댓글달기 추천 문구... 80san 2018.01.31 110
231 문하우스 "소셜XE 2015 모듈" 사용중 API 오류 나는 경우 &quot;소셜XE 2015 모듈&quot; 사용해서 SNS로그인을 적용해서 사용중인데 어느 순간 부터 네이버 와 카카오톡으로 로그인이 되지를 않더군요. 네이버는 API오류 라고 뜨고,... file 80san 2018.01.31 96
230 문하우스 위젯을 가로로 정렬했을때 모바일에서 반응형으로 적용하기 위젯페이지 작업시 위젯을 가로로 50%씩해서 가로 정렬시 웹에서는 디자인이 보기가 좋으나 모바일에서는 너무 작게 가로로 나타납니다. 모든 위젯을 반응형으로 ... file 80san 2018.01.29 208
229 XE타운 10원짜리 깜빡이로 강조하기 팁 뭔가 꼭 알려 주고 싶은 내용을 특정 위치에 적어 놓지만 신경 쓰지 않고 읽지 않는 경우가 많을 겁니다. 깜빡이 효과를 줘서 조금 더 눈에 띌 수 있도록 해 봅니... file 웹지기 2018.01.29 47
228 문하우스 SoSiFam 한 줄 메모 게시판 라이믹스에서 사용 가능하게 편집 라이믹스를 업데이트 하고 나니 첫화면 우측 아래에 있는 &quot;가입인사&quot;에 글 등록이 되지를 않아서 SoSiFam 한 줄 메모 게시판을 수정했습니다. 내용글이 없어면 글... 2 file 80san 2018.01.27 70
227 문하우스 라이믹스에서 내용글 없이 글 작성하기 XE에서 라이믹스로 갈아타고 나니 게시판설정중에 내용글 없이 글 작성하기시 &quot;내용글은 필수입니다&quot;라는 팝업창이 출력되는군요. 문의를 한 결과 라이믹스에서는... file 80san 2018.01.27 64
226 문하우스 문하우스의 라이믹스 업데이트 여정 XETOWN을 알고 라이믹스를 알게 되었고 기본 XE보다는 좋아보이고 괜히 최신을 따라해 보고 싶어서 라이믹스를 지원하는 무료 호스팅에도 설치해 보고 컴에도 한... 5 file 2018.01.27 116
225 XE타운 간단한 게시물 주소 복사 버튼 달기 게시판 상단에 게시물의 주소를 복사하는 버턴을 출력시키는 Tip이 올라와서 https://xetown.com/rxe_tip/865950 좋은 Tip인 것 같아서 제가 게시판설정과 에드온... 5 file 돼둥이 2018.01.22 173
224 문하우스 게시판 설정 위자드 생성하는 방법 sketchbook5 게시판을 사용해 보면 게시판 관리를 화면 좌측에 있는 위자드메뉴로 설정을 할 수 있어서 편리합니다. 그래서 다른 게시판에 설정위자드를 붙이는 ... file 80san 2018.01.21 52
223 문하우스 squarenet.kr에서 제공하는 cPanel 무료 웹서브 세팅 따라하기 https://xetown.com/tiptalk/856889 페이지를 보고 마침 복구해야할 사이트가 있어서 신청해 보았습니다. 의외로 다양한 설정을 직접 할 수 있고 안정된 서비스라... 3 file 80san 2018.01.15 190
222 Xe 로그인 ID를 이메일에서 아이디로 변경하는 방법 XE가 버전업 되면서 예전의 로그인 ID가 &#039;아이디&#039;에서 &#039;이메일 주소&#039;로 변경되면서 예전사이트를 최신사이트로 옮길경우 관리자페이지 접속시 문제가 됩니다. 그... file 불금 2018.01.13 48
221 문하우스 말풍선(툴팁) 애드온을 이용한 위젯설정 https://www.xetown.com/rxe_file/777583 을 설치를 하고 이렇게 재미있고 활용이 무궁할 것 같은 애드온을 어떻게 적용할 것 인가를 생각하다가 위젯에 적용해 ... 3 file 80san 2017.11.07 150
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 12 Next
/ 12

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