jquery - jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow)

Query로 웹사이트에서 마우스 스크롤을 했을때 봉봉 같이 따라 뎅기는 배너를 맨들려고 했는데 계산하기 귀찮아서

어떤 머리좋은 사람이 분명히 훌러그인을 만들어 놨을것이라 확신하고 구글에게 물어보았다.

검색능력이 시원찮아서 그런가 많이 검색될 줄 알았더만 내가 원하는 훌러그인을 겨우 하나 발견했다.

"jquery.scrollfollow.js" 라는 훌러그인이었다.

사이트 주소 : http://kitchen.net-perspective.com/open-source/scroll-follow/

그런데 요 훌러그인을 옛날에 맨들어서 그런지 최신버전 jQuery 에서는 오류가 나서 정상적으로 작동하지 않았다.

(※ 요 훌러그인은 jQuery 1.2.6 에서 테스트 했다고 함. 참 옛날에 맹근것인가 보다)

꼴랑 요 훌러그인 하나 때문에 jQuery 버전을 후진걸로 바꿀수 없지 아니한가. 다른 훌러그인을 검색해 봐도 잘 검색도 안되고 해서 그냥 최신 버전 jQuery 에서 돌아가도록 소스를 살짝 수정하기로 했다.

현재 jQuery 1.7.1 을 쓰고 있는데 잘 작동한다.

수정버전 다운로드 ↓

jquery.scrollfollow.js

◎ 사용법

사용법은 http://kitchen.net-perspective.com/open-source/scroll-follow/ 요기에 나와있는 대로 하면 된다. 단, container 옵션은 잘 안될것 같다.

아래 코드로 테스트한 결과는 <== 요 옆에 꾸리하게 따라뎅기는 배너창이다.

※ 꿈지럭 거릴 div css 속성에서 position 은 absolute 나 relative 로 해야 한다.

※ 내가 이상하게 수정해서 그런지 몰라도 top 속성도 줘야 쪽바로 잘 움직이는듯 하다.

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.scrollfollow.js"></script>
     
    <script>
        $(document).ready(function(){
            $("#testbanner").scrollFollow({
                speed : 800,    // 꿈지럭 거리는 속도
                offset : 200     // 웹페이지 상단에서 부터의 거리(바꿔보면 뭔지 안다)
            });
        });
    </script>
     
    <style>
        #testbanner{
            position: absolute;
            border: 3px solid #f00;
 
            left : 100px;
            top : 30px;
            width: 150px;
            height: 300px;
        }
    </style>
</head>
 
<body>
    <div id="testbanner">
        봉봉 배너 테스트<br/>
        <a href="/">홈으로</a>
    </div>
</body>
</html>

기본옵션으로만 쓰고 싶으면 딸랑 요렇게만 해도 된다.

$("#testbanner").scrollFollow();

움직일때 easing 효과를 주고 싶으면 jQuery UI 훌러그인(jquery-ui-x.x.x.custom.min.js)을 뽓 추가시켜 easing 옵션을 주면 된다.

※ easing 옵션으로 가능한 문자열은 http://jqueryui.com/demos/effect/easing.html 요기에 있는 문자열 중에 하나로~

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="jquery.scrollfollow.js"></script>
     
<script>
    $(document).ready(function(){
        $("#testbanner").scrollFollow({
            easing : "easeInOutBack"
        });
    });
</script>

jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow)

단축키

Articles