[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 스크립트는 로드되어 있어야 정상 작동한다.

편리

PHP와 MariaDB, jQuery 등을 사용해 게시판, 쇼핑몰 솔루션을 개발합니다. 그누보드5와 영카트5 개발에 참여 했습니다. Linux와 Nginx는 물론 WordPress, Git 등에도 관심이 많습니다. 자전거 타기 및 사진 촬영을 취미로 하고 있습니다.

카카오톡 플러스친구 채팅 : NCUBE.NET

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.