[jQuery] Smooth Div Scroll
사이트 작업 중에 협력업체 배너를 부드럽게 왼쪽으로 흐르게 하는 부분이 있어 이전에 쓰던 소스를 사용하려고
했더니 글쎄 이 소스는 익스에서만 제대로 보이고 파이어폭스나 크롬에서는 아예 보이지도 않는 문제가 있어 다른
소스를 찾게 되었고.. 요즘 한창 빠져있는 jQuery plugin 형태의 소스가 있어 어제 퇴근하고 적용을 해봤다. ㅎ
출처 : http://www.smoothdivscroll.com/
위 사이트에 자세한 적용법은 나와있는데 일단 내가 필요했던 것은 왼쪽으로 배너가 흐르다 마우스 오버 상태에서는
정지하고 또 각 배너를 클릭하면 해당 사이트로 이동을 해야하기 때문에 소스를 약간 수정했다. 사이즈 등은 CSS를
통해 간단히 수정할 수 있다. 우선 사이트에 적용을 하기 위해서는 추가로 jQuery UI Widget을 다운로드 해야한다.
아래는 CSS 내용이다.
#makeMeScrollable
{
width:980px;
height: 35px;
position: relative;
margin-left: 5px;
overflow: hidden;
}
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0 0 0 10px;
}
/* You can alter this CSS in order to give SmoothDivScroll your own look’n’feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
min-width: 75px;
width: 10%;
height: 100%;
/* There is a big background image and it’s used to solve some problems I experienced
in Internet Explorer 6. */
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/* The first url is for Firefox and other browsers, the second is for Internet Explorer */
cursor: url(../images/cursors/cursor_arrow_left.png), url(images/cursors/cursor_arrow_left.cur),w-resize;
}
/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-image: url(../images/arrow_left.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35; /* Standard CSS3 opacity setting */
-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
zoom: 1; /* Trigger “hasLayout” in Internet Explorer 6 or older versions */
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
cursor: url(../images/cursors/cursor_arrow_right.png), url(images/cursors/cursor_arrow_right.cur),e-resize;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(../images/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
}
/* The scroll wrapper is always the same width and height as the containing element (div).
Overflow is hidden because you don’t want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}
HTML 코드이다.
<div id=”makeMeScrollable”>
<div class=”scrollingHotSpotLeft”></div>
<div class=”scrollingHotSpotRight”></div>
<div class=”scrollWrapper”>
<div class=”scrollableArea”>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_bonoya_on.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_busankiac_on.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_design_on.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_jeswood_on.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_kbiz_on.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_kiac1_on.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_leekorea_off.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_lucedeco03_on.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_sam_on.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_wen2day_on.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_sambooja_on.gif” alt=”Demo image” /></a>
<a href=”http://www.naver.com/” target=”_blank”><img src=”<?=$g4[img_path]?>/partner/bn_kiacsky_on.gif” alt=”Demo image” /></a>
</div>
</div>
</div>
마지막으로 아래 코드를 적어주면 작동하게 된다.
<script type=”text/javascript” src=”<?=$g4[‘path’]?>/js/jquery.ui.widget.js”></script>
<script type=”text/javascript” src=”<?=$g4[‘path’]?>/js/jquery.smoothDivScroll-1.1-min.js”></script>
<script type=”text/javascript”>
$(window).load(function() {
$(“div#makeMeScrollable”).smoothDivScroll({
autoScroll: “always”,
autoScrollDirection: “endlessloopright”,
autoScrollStep: 1,
autoScrollInterval: 25
});
$(“div#makeMeScrollable”).bind(“mouseover”, function() {
$(this).smoothDivScroll(“stopAutoScroll”);
}).bind(“mouseout”, function() {
$(this).smoothDivScroll(“startAutoScroll”);
});
});
</script>
jQuery를 사용하기 때문에 jQuery 스크립트는 로드되어 있어야 정상 작동한다.