[jQuery] 부드럽게 흐르는 simplyScroll
사이트 작업 중 아래와 같은 회사 로고가 왼쪽으로 부드럽게 흐르도록 작업을 해야만 할 일이 생겼다.
전에 사용하던 소스가 있긴 했는데.. 이게 어찌된 일인지 적용하니 원하는 대로 작동을 하지 않아 급하게
다른 소스를 찾아보게 되었고.. 다행히 구글신의 도움으로 어렵지 않게 멋진 jQuery 플러그인을 찾았다.
cfile23.uf.137C8E394FB1B29B146F36.zip
사용법은 무척 간단하다. jquery 와 simplyscroll 파일을 로딩하고 simplyscroll.css 에서 스타일을 수정하면 된다.
아래는 간단히 구현한 파일의 일부분이다. li 안쪽에 이미지를 넣어주기만 하면 된다.
<link rel=”stylesheet” href=”./css/jquery.simplyscroll.css” type=”text/css” />
<script type=”text/javascript” src=”./js/jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”./js/jquery.simplyscroll.min.js”></script>
<ul id=”scroller”>
<li><img src=”./images/client/on_01.jpg” alt=”” /></li>
<li><img src=”./images/client/on_02.jpg” alt=”” /></li>
<li><img src=”./images/client/on_03.jpg” alt=”” /></li>
<li><img src=”./images/client/on_04.jpg” alt=”” /></li>
<li><img src=”./images/client/on_05.jpg” alt=”” /></li>
<li><img src=”./images/client/on_06.jpg” alt=”” /></li>
<li><img src=”./images/client/on_07.jpg” alt=”” /></li>
<li><img src=”./images/client/on_08.jpg” alt=”” /></li>
<li><img src=”./images/client/on_09.jpg” alt=”” /></li>
<li><img src=”./images/client/on_10.jpg” alt=”” /></li>
<li><img src=”./images/client/on_11.jpg” alt=”” /></li>
<li><img src=”./images/client/on_12.jpg” alt=”” /></li>
<li><img src=”./images/client/on_13.jpg” alt=”” /></li>
<li><img src=”./images/client/on_14.jpg” alt=”” /></li>
<li><img src=”./images/client/on_15.jpg” alt=”” /></li>
<li><img src=”./images/client/on_16.jpg” alt=”” /></li>
<li><img src=”./images/client/on_17.jpg” alt=”” /></li>
<li><img src=”./images/client/on_18.jpg” alt=”” /></li>
<li><img src=”./images/client/on_19.jpg” alt=”” /></li>
<li><img src=”./images/client/on_20.jpg” alt=”” /></li>
<li><img src=”./images/client/on_21.jpg” alt=”” /></li>
<li><img src=”./images/client/on_22.jpg” alt=”” /></li>
<li><img src=”./images/client/on_23.jpg” alt=”” /></li>
<li><img src=”./images/client/on_24.jpg” alt=”” /></li>
<li><img src=”./images/client/on_25.jpg” alt=”” /></li>
<li><img src=”./images/client/on_26.jpg” alt=”” /></li>
<li><img src=”./images/client/on_27.jpg” alt=”” /></li>
<li><img src=”./images/client/on_28.jpg” alt=”” /></li>
<li><img src=”./images/client/on_29.jpg” alt=”” /></li>
<li><img src=”./images/client/on_30.jpg” alt=”” /></li>
</ul>
$(function() {
$(“#scroller”).simplyScroll();
});
이렇게만 해주면 기본적으로 작동이 된다. 로고 영역으로 마우스오버 되면 scroll이 멈추고 마우스아웃이면 다시 scrroll 된다. 애니메이션 시간도 적당하고 움직임도 자연스러워서 상당히 만족스러웠다.
제가 찾던 자료가여기에 있네요 감사합니다.
댓글 남겨주셔서 감사합니다. 좋은 하루 되세요.
와 고맙습니다 잘쓰겠습니다>_<
도움이 되었다니 다행입니다. 멋진 하루되세요!