[jQuery] 부드럽게 흐르는 simplyScroll

사이트 작업 중 아래와 같은 회사 로고가 왼쪽으로 부드럽게 흐르도록 작업을 해야만 할 일이 생겼다.

전에 사용하던 소스가 있긴 했는데.. 이게 어찌된 일인지 적용하니 원하는 대로 작동을 하지 않아 급하게

다른 소스를 찾아보게 되었고.. 다행히 구글신의 도움으로 어렵지 않게 멋진 jQuery 플러그인을 찾았다.

jQuery simplyScroll 보기

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 된다. 애니메이션 시간도 적당하고 움직임도 자연스러워서 상당히 만족스러웠다.

편리

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

4 thoughts to “[jQuery] 부드럽게 흐르는 simplyScroll”

Leave a Reply

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