플로팅 배너 자동으로 따라다니는 jQuery 소스

플로팅 배너 자동으로 따라다니는 jQuery 소스

플로팅 배너가 자동으로 사용자의 스크롤을 따라다니는 jquery 소스입니다.

플로팅 배너의 css 를 absolute로 잡고, jquery 의 animate() 를 이용하여 사용자의 스크롤 이벤트 후 배너를 애니메이션과 함께 위치를 움직여줍니다.

easing 옵션을 이용하여 애니메이션 효과도 줄수 있습니다.

css

1 2 3 4 5 6 7 8 9

#floatMenu { position: absolute; width: 200px; height: 200px; left: 50px; top: 250px; background-color: #606060; color: #fff; }

jQuery

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<script> $(document).ready(function() {   // 기존 css에서 플로팅 배너 위치(top)값을 가져와 저장한다. var floatPosition = parseInt($("#floatMenu").css('top')); // 250px 이런식으로 가져오므로 여기서 숫자만 가져온다. parseInt( 값 );   $(window).scroll(function() { // 현재 스크롤 위치를 가져온다. var scrollTop = $(window).scrollTop(); var newPosition = scrollTop + floatPosition + "px";   /* 애니메이션 없이 바로 따라감 $("#floatMenu").css('top', newPosition); */   $("#floatMenu").stop().animate({ "top" : newPosition }, 500);   }).scroll();   }); </script>

 

여기서 애니메이션을 easing option 을 추가한다고 할경우

1 2 3 4 5 6 7 8 9

$("#floatMenu").stop().animate({ "top" : newPosition }, { 'duration' : 500, 'easing' : 'easeInOutCubic', 'complete' : function() { console.log('이동 완료하였습니다.'); } });

이런식으로 사용해주어도 됩니다.

animate 옵션중의 complete 를 이용하여 에니메이션 완료후 따라온 배너에 효과를 한번더 준다던가 처리를 해줄 수 있습니다.

 

애니메이션 효과를 주지않고 그냥 고정되게 보이려면 jquery를 사용할 필요없이 단순하게

1	position:fixed

를 이용하면 간단하게 사용할 수 있습니다.

 

플러그인으로 만들기조차 아까울정도로 짧은 코드인지라..

그래도 언제 시간이날때 이 소스를 기반으로 플러그인을 만드는 포스팅을 할 예정입니다.

또한 조금 더 손을 봐서 모바일에서는 보이게 하지 않는다던지,

아니면

1	$(window).scrollTop();

이 값을 이용하여, 특정 스크롤 밑에 왓을때만 배너가 보이게 한다던지

하는식으로 여러가지 응용이 가능할것 같습니다.

 

소스 및 데모는 아래 링크에서 확인할수 있습니다.

https://jsfiddle.net/JangSeongeun/dqddL01z/

출처 http://blog.tjsrms.me/%ED%94%8C%EB%A1%9C%ED%8C%85-%EB%B0%B0%EB%84%88-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EB%94%B0%EB%9D%BC%EB%8B%A4%EB%8B%88%EB%8A%94-jquery-%EC%86%8C%EC%8A%A4/