이번 예제는 가성비 좋은 코드입니다.
가성비가 좋다고한 이유는 간단한 코드에 비해 멋진(?) 효과를 내기 때문인데요.
아래 검은 상자를 클릭해 보시면 알 수 있습니다.
좀 강력할 수도 있겠네요. ^^;
이걸 만드는 과정을 예제로 해보겠습니다.
준비 되셨으면 눌러주세요 !
※ 약간 무서울 수 있으니 조심해서 눌러주세요.
※ 깜놀 주의 !!!! 깜놀 주의 !!!! 깜놀 주의 !!!!
등록일 : ,
어렵지 않은 코드로 멋진 효과내기(?)
헉 !? 귀신
귀신
시작 : 귀신이 등장할 검은 상자를 만듭시다
깜짝 놀라셨다면 사과의 말씀 드립니다. ㅠㅠ..
그럼 순서대로 차근차근 만들어 보겠습니다. >_<
검은 상자는 DIV 태그와 CSS를 이용해서 간단히 만들수 있습니다.
그럼 순서대로 차근차근 만들어 보겠습니다. >_<
검은 상자는 DIV 태그와 CSS를 이용해서 간단히 만들수 있습니다.
CSS
.ghostbox { /* 귀신 상자 */
background-color : black;
border-radius : 20px; /* 모서리 둥굴게 */
box-shadow : 0 0 10px gray; /* 박스 주위로 회색 그림자 */
height : 550px;
margin : 0 auto; /* 가운데 정렬 */
width : 800px;
}
HTML
<div class="ghostbox"></div>
이렇게 하면 검은 상자가 만들어 집니다. 이건 눌러도 아무것도 안나옵니다. ^^;
참고 링크 : CSS 공작소에서 예제보기
background-color border-radius box-shadow준비물 : 귀신 이미지

원한을 품은 처녀귀신
검은 배경에 사용할 GIF 이미지 입니다.
수위 조절을 해서 선택한 이미지라 별로 공포스럽지는 않습니다. (?)
이 이미지를 아주 오래전 부터 알고 계시다면 당신은 "아재" 일 가능성이 높습니다.
최소 에 구했던 이미지 이니까요.
이거 원본은 입이 뻐끔뻐끔 거립니다.
예제에 사용하기 위해 그 부분은 없앴습니다.
수위 조절을 해서 선택한 이미지라 별로 공포스럽지는 않습니다. (?)
이 이미지를 아주 오래전 부터 알고 계시다면 당신은 "아재" 일 가능성이 높습니다.
최소 에 구했던 이미지 이니까요.
이거 원본은 입이 뻐끔뻐끔 거립니다.
예제에 사용하기 위해 그 부분은 없앴습니다.
검은 상자에 귀신 투입 !!
그냥 넣기만 했는데도 그럴듯 하네요.
CSS 를 이용해서 귀신을 검은상자의 배경이미지로 설정하였고
중앙정렬 지정 + 배경 반복 안되게 했습니다.
※ 핵심
- CSS 속성을 사용해서 간단하게 중앙 정렬.
- 이렇게 하면 스크립트로 애니메이션할 때 중앙 정렬을 위한 계산을 안해도 됨.
CSS
.ghostbox {
background-color:black;
background-image:url('http://superkts.com/img/css/ghost.gif'); /* 귀신 이미지를 배경으로 설정 */
background-position:center; /* 이미지 중앙 정렬 */
background-repeat:no-repeat; /* 이미지 반복 안함 */
border-radius:20px;
box-shadow:0 0 10px gray;
height:550px;
margin:0 auto;
width:800px;
}
HTML
<div class="ghostbox"></div>
보고 있는데 갑자기 움직이면 놀라겠죠.
참고 링크 : CSS 공작소에서 예제보기
background-image background-position background-repeat이제 jQuery 로 귀신에 생명(!)을 불어넣어 봅시다
- 귀신 이미지를 작게 만들고 확대 시키는 것을 제이쿼리 애니메이션으로 해볼겁니다.
- 이미지는 CSS 로 중앙정렬 되어있으므로 위치는 따로 컨트롤 할 필요가 없습니다. (편함)
- 그냥 확대만 시키면 되겠습니다.
- 이미지는 CSS 로 중앙정렬 되어있으므로 위치는 따로 컨트롤 할 필요가 없습니다. (편함)
- 그냥 확대만 시키면 되겠습니다.
상자를 클릭해서 귀신을 불러봅시다
간단한 효과만 넣은 예제입니다.
- 여러번 클릭해 보세요 ^^
- 여러번 클릭해 보세요 ^^
CSS
.ghostbox {
background-color:black;
background-image:url('http://superkts.com/img/css/ghost.gif');
background-position:center;
background-repeat:no-repeat;
background-size:0; /* 이미지 크기를 0 으로 해서 안보이게 합니다 */
border-radius:20px;
box-shadow:0 0 10px gray;
cursor:pointer; /* 검은상자에 마우스 커서 지정 */
height:550px;
margin:0 auto;
width:800px;
}
HTML
<div class="ghostbox" onclick="ghostOn()"></div>
자바스크립트
// 제이쿼리 animate 메소드를 사용해서 귀신이 나오게 합니다
function ghostOn(){
// 1초 동안 background-size 를 80% 더 크게 만들기
// 현재 값에 +80% 이므로 실행시 계속 커지게 됨
$('.ghostbox').animate({'background-size':'+=80%'}, 1000);
}
이제 이 예제를 좀 더 개선해서 더 그럴듯 하게 만들어 봐야겠죠.
참고 링크 : 공작소에서 예제보기
CSS : background-size jQuery : animate좀 더 쓸만하게 만들기
- 귀신이 나왔다가 사라지게 해봅시다. (이미지가 커졌다가 작아지도록)
- 귀신이 움직이는 동안에는 클릭해도 반응하지 않도록 해봅시다.
- 귀신이 움직이는 동안에는 클릭해도 반응하지 않도록 해봅시다.
CSS
.ghostbox {
background-color:black;
background-image:url('http://superkts.com/img/css/ghost.gif');
background-position:center;
background-repeat:no-repeat;
background-size:0; /* 이미지 크기를 0 으로 해서 안보이게 합니다 */
border-radius:20px;
box-shadow:0 0 10px gray;
cursor:pointer; /* 검은상자에 마우스 커서 지정 */
height:550px;
margin:0 auto;
width:800px;
}
HTML
<div class="ghostbox" onclick="ghostOn()"></div>
자바스크립트
// 제이쿼리 animate 메소드를 사용해서 귀신이 나오게 합니다
function ghostOn(){
// 1초 동안 background-size 를 80% 더 크게 만들기
// :not(:animated) 셀렉터를 사용해서 애니메이션중이 아닐때만 실행하기
$('.ghostbox:not(:animated)').animate({'background-size':'+=80%'}, 1000, function(){
// 커지는 효과가 끝나면 작아지도록 함
$('.ghostbox').animate({'background-size':'-=80%'}, 10000); // 10 초동안 노려보면서 사라짐
});
}
참고 링크 : 공작소에서 예제보기
jQuery - :animated약간의 효과 더 추가하기
- 귀신이 나왔을때 약간의 효과를 더 추가해 보았습니다.
- CSS 로 간단히 추가했고 jQuery 로 적용, 해제 해 보겠습니다.
- 한번 더 검은 상자를 눌러보세요 ^^
- CSS 로 간단히 추가했고 jQuery 로 적용, 해제 해 보겠습니다.
- 한번 더 검은 상자를 눌러보세요 ^^
CSS
.ghostbox {
background-color:black;
background-image:url('http://superkts.com/img/css/ghost.gif');
background-position:center;
background-repeat:no-repeat;
background-size:0; /* 이미지 크기를 0 으로 해서 안보이게 합니다 */
border-radius:20px;
box-shadow:0 0 10px gray;
cursor:pointer; /* 검은상자에 마우스 커서 지정 */
height:550px;
margin:0 auto;
width:800px;
}
.ghostbox.fear_on { /* 검은 상자에 빨간 안쪽 테두리 추가 */
box-shadow:0 0 60px red inset, 0 0 30px red inset;
}
HTML
<div class="ghostbox" onclick="ghostOn()"></div>
자바스크립트
// 제이쿼리 animate 메소드를 사용해서 귀신이 나오게 합니다
function ghostOn(){
// 1초 동안 background-size 를 80% 더 크게 만들기
// :not(:animated) 셀렉터를 사용해서 애니메이션중이 아닐때만 실행하기
// fear_on 클래스 적용하기
$('.ghostbox:not(:animated)').addClass('fear_on').animate({'background-size':'+=80%'}, 1000, function(){
// 커지는 효과가 끝나면 작아지도록 함
// 10 초동안 노려보면서 사라짐
$('.ghostbox').animate({'background-size':'-=80%'}, 10000, function(){
$(this).removeClass('fear_on'); // fear_on 제거, 빨간 테두리 제거
});
});
}
처음 보았던 예제에 거의 근접해졌습니다. 좀 더 가볼까요? ㅎㅎ
실행 가능한 소스
참고 링크 : 공작소에서 예제보기
CSS : background-size CSS : box-shadow jQuery : addClass jQuery : animate jQuery : removeClass페이지 처음에서 보았던 예제
jQueryUI 이징(easing) 효과를 사용했습니다.
CSS
.ghostbox {
background-color:black;
background-image:url('http://superkts.com/img/css/ghost.gif');
background-position:center;
background-repeat:no-repeat;
background-size:0;
border-radius:20px;
box-shadow:0 0 10px gray;
cursor:pointer;
height:550px;
margin:0 auto;
width:800px;
}
.ghostbox.fear_on {
box-shadow:0 0 60px red inset, 0 0 30px red inset;
}
HTML
<div class="ghostbox" onclick="ghostOn()"></div>
자바스크립트
function ghostOn(){
$('.ghostbox:not(:animated)') // 클래스명이 ghostbox 이면서 애니메이션중이 아닌것 찾기
.addClass('fear_on') // 빨간 테두리 클래스 추가
.animate({'background-size':'+=80%'}, 1500, 'easeOutElastic', function(){ // easeOutElastic 효과 적용하여 1.5초 동안 배경 80% 확대
// 확대가 끝나면 아래 실행
$('.ghostbox').animate({'background-size':'-=80%'}, 5000, function(){ // 5초 동안 배경 80% 축소
$(this).removeClass('fear_on'); // 배경 축소가 끝나면 빨간 테두리 제거
});
});
}
제이쿼리도 중요하지만 CSS에 대한 응용과 이해도 중요합니다.
실행 가능한 소스
관련 링크
jQuery 공작소 에서 이징(easing) 효과 보기정말 마지막 예제
- 검은 상자 대신 사진을 사용해 보았습니다.
- 제이쿼리UI 의 이징(easing)효과도 적용했습니다.
- 문경에 있는 석현 터널이라는 곳인데 직접 찍은 사진입니다.
- 터널안은 실제로 공포입니다. ㄷㄷ
- 제이쿼리UI 의 이징(easing)효과도 적용했습니다.
- 문경에 있는 석현 터널이라는 곳인데 직접 찍은 사진입니다.
- 터널안은 실제로 공포입니다. ㄷㄷ
CSS
.bg {
background-image:url('http://ktsmemo.cafe24.com/api/random_background.php?n=24'); /* 터널 사진 */
background-position:50% 50%; /* 사진 중앙 정렬 */
background-repeat:no-repeat;
background-size:cover; /* 이미지를 영역에 가득 채운다 */
height:800px;
margin:0 auto;
width:1200px;
}
.ghostbox {
background-image:url('http://superkts.com/img/css/ghost.gif'); /* 귀신 이미지 */
background-position:50% 50%; /* 이미지 중앙 정렬 */
background-repeat:no-repeat;
background-size:0; /* 이미지 크기를 0 으로 해서 안보이게 합니다 */
cursor:pointer; /* 검은상자에 마우스 커서 지정 */
height:100%; /* 높이 100% */
}
.ghostbox.fear_on { /* 검은 상자에 빨간 안쪽 테두리 추가 */
box-shadow:0 0 60px red inset, 0 0 30px red inset;
}
HTML
<div class="bg">
<div class="ghostbox" onclick="ghostOn()"></div>
</div>
자바스크립트
// 제이쿼리 animate 메소드를 사용해서 귀신이 나오게 합니다
function ghostOn(){
// 1초 동안 background-size 를 80% 더 크게 만들기
// :not(:animated) 셀렉터를 사용해서 애니메이션중이 아닐때만 실행하기
// fear_on 클래스 적용하기
// 이징효과 easeOutElastic 적용 (귀신이 나올 때 효과)
$('.ghostbox:not(:animated)').addClass('fear_on').animate({'background-size':'400px'}, 1000, 'easeOutElastic', function(){
// 커지는 효과가 끝나면 작아지도록 함
// 10 초동안 노려보면서 사라짐
$('.ghostbox').animate({'background-size':'0'}, 5000, function(){
$(this).removeClass('fear_on'); // fear_on 제거, 빨간 테두리 제거
});
});
}
귀신 자주 보니까 안무섭네요.. ^^;
실행 가능한 소스
+++ 관련 링크 +++
jQuery 공작소 에서 이징(easing) 효과 보기 한여름의 공포체험 석현터널의 귀신귀신은 이제 그만~!

제이쿼리 공작소와 CSS 공작소는 직접 제작 운영중인 사이트 입니다.
시간 되시면 한번 방문해 보세요 ^^;
시간 되시면 한번 방문해 보세요 ^^;
방문해 주셔서 감사드립니다 !!