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>