'meerkat'에 해당되는 글 1건
- 2012.08.30 Meerkat 귀여운 사이드바
Meerkat 귀여운 사이드바
요즘 jQuery 플러그인을 찾아 국내(사이트..)로 해외(사이트.....)로 열심히 돌아다니던 중 귀엽고 간단한 플러그인을 찾아서 포스팅합니다.
meerkat (http://meerkat.jarodtaylor.com/)
왜 미어캣인지 모르겠지만 홈페이지에서 데모를 실행해보시면 "아?ㅋㅋㅋㅋㅋㅋㅋㅋ?" 하실겁니다. 미어캣처럼 빼꼼히 고개를 내미는 사이드바가 아주 귀요미네요.
두 가지의 미어캣 플러그인을 사용할 수 있습니다.
1. 프로그램이 실행될 때 잠깐 나타났다가 사라지는 스플래시 이미지같은 효과
2. 사이드바
일단 jQuery와 미어캣 플러그인 자바스크립트 파일을 인클루드 합니다.
jQuery 최신버전 받기 (http://jquery.com/download/)
meerkat 최신버전 받기 (http://meerkat.jarodtaylor.com/)
그리고 나서 div를 하나 만들어줍니다. 저는 예제 그대로 사용하기 위해 meerkat 이라는 스타일시트 클래스명을 지정해줬습니다.
<head>
<title>meerkat plugin</title>
<script type="text/javascript" src="/Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.meerkat.1.3.js"></script>
</head>
<body>
<div class="meerkat"></div>
</body>
</html>
1. 스플래시 미어캣 예제
<head>
<title>meerkat plugin</title>
<script type="text/javascript" src="/Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.meerkat.1.3.js"></script>
<script type="text/javascript">
$(function () {
$('.meerkat').meerkat({
background: 'url("http://meerkat.jarodtaylor.com/wp-content/themes/meerkat-default/images/meerkat-1.png") no-repeat right bottom',
height: '100%',
width: '100%',
position: 'bottom',
dontShowAgain: '#enter',
animationIn: 'none',
animationOut: 'fade',
animationSpeed: 500,
timer: 2,
removeCookie: '.reset'
});
</script>
</head>
<body>
<div class="meerkat"></div>
</body>
</html>
위 예제에서 나타나거나 사라지는 방식, 애니메이션 속도, 시간 등은 파란색 소스 부분을 적당히(!) 고쳐보면서 테스트해볼 수 있습니다.
2. 사이드바 미어캣 예제
<head>
<title>meerkat plugin</title>
<script type="text/javascript" src="/Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.meerkat.1.3.js"></script>
<script type="text/javascript">
$(function () {
$('.meerkat').meerkat({
background: '#897042 url("http://meerkat.jarodtaylor.com/wp-content/themes/meerkat-default/images/meerkat-1.png") no-repeat right bottom',
height: '400px',
width: '100%',
position: 'bottom',
close: '.close-meerkat',
dontShowAgain: '.dont-show',
animationIn: 'slide',
animationOut: 'fade',
animationSpeed: 500,
delay: 2,
timer: 5,
opacity: .9
});
});
</script>
<style type="text/css">
.close-meerkat {
position: absolute;
display: block;
height: 18px;
width: 18px;
background: url('http://meerkat.jarodtaylor.com/demo/images/close-x.png') no-repeat 0 0;
cursor: pointer;
text-indent: -9000px;
z-index: 10;
}
</style>
</head>
<body>
<div class="meerkat">
<a href="#" class="close-meerkat">close</a>
</div>
</body>
</html>
배너광고나 공지사항, 버튼그룹을 출력하면 좋을 것 같은 사이드바입니다. 위 예제의 파란색 부분에서 position을 top이나 left, right 등으로 변경하시면 사이드바의 위치를 변경할 수 있습니다. 스플래시 예제와같이 애니메이션 방식이나 속도, 시간, 투명도 등을 조절해서 사용하면 됩니다.
분홍색 소스는 사이드바 닫기 버튼이 구현된 부분입니다. 파란색 소스에서 close: '.close-meerkat' 라고 지정했고, 분홍색 소스에서 닫기 버튼의 스타일을 작성해서 해당 버튼을 눌렀을 때 사이드바가 사라지도록 할 수 있습니다.
cookie 등의 옵션이 있는 걸 보면 아마 오늘 하루 이 창 열지 않기 등의 기능도 구현할 수 있는 것 같은데 직접 해보세요(....
보통의 플러그인과 다르게 다운로드하면 jquery.meerkat.js 파일 하나만 다운로드해서 예제는 홈페이지를 보고 직접 작성해야 하지만 복붙하면 별다른 설정없이 그대로 구현되니 정말 기특하고 귀여운 플러그인이네요 :D
