jquery 움직이는 스크롤 사이드바

| J-Query

2012. 11. 15. 21:06

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

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

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

"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>

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

1	`$("#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>

그 밖에 다른 옵션은 http://kitchen.net-perspective.com/open-source/scroll-follow/ 요기 참고~

저작자표시

'J-Query' 카테고리의 다른 글

extjs 공부해 보자. (0)	2012.11.22
jquey ready? $(function(){});? (0)	2012.11.22
jQuery 라이브러리 사용 방법 (1)	2012.11.15
sliding (0)	2012.11.15
컬럼 추가 삭제 (0)	2012.09.10