jQuery로 움직이는 배너 만들기

배너를 움직이게 하기위해서는 

페이지가 열린 후에도 동적으로 Element의 속성을 변경되어야한다.

 

이를 위해서는 당연히 javaScript가 필요한데, 

javascript를 통해서 HTML의 window 객체의 정보를 얻어서 동적으로 움직이게 하면 된다.

그렇지만 순수 JavaScript로 모든 것을 구현하기엔 애니메이션과 같은 너무 복잡한 부분들이 존재한다.

 

이러한 어려움은 JQuery를 통해 간단하게 해결하여 움직이는 배너를 구현할 수 있다.

 

 

1. 움직이는 기준 : 스크롤 이동

스크롤이 이동할 때마다 배너의 위치를 바꾸어 주어야 한다.

이를 위해선 가장 먼저 스크롤이 이동했는지 알려주고, 이동할 때마다 특정한 행동(함수)를 하게 만들어야한다.

이러한 기능을 가지는 JQuery 함수가 바로 $(window).scroll() 이다.

 

$(window).scroll(function(){ /* 실행할 함수 */ });

 

2. 멈추는 기준 : 스크롤 기준 일정 거리

스크롤을 기준으로 하기 때문에 현재 스크롤이 위에서부터 몇이나 떨어져있는지 알 수 있어야한다.

이러한 기능을 하는 것 역시 JQuery 함수  $(window).scrollTop() 이다.

현재 스크롤이 페이지 맨위에서 얼마만큼 떨어져있는지를 계산해준다.

즉, 여기서 나오는 값은 현재 보고 있는 페이지에서 제일 꼭대기라고 생각하면 편하다.

보통 배너는 페이지 중간쯤 나오기 때문에 나는 여기에 35를 더해서 변수에 저장해 둘 것이다.

 

var position = $(window).scrollTop()+35;

 

3. 움직이는 효과 : 부드럽게 이동해서 멈추는 효과

움직이기 시작하는 기준과 멈추는 지점을 선언했으니 이제 부드럽게 이동하게 만들면 된다.

이를 위해선 $(‘#banner’).stop().animate({속성명 :속성값},이동시간)를 사용한다.

배너 div의 속성이 지정해준 속성값까지 이동시간안에 변하도록 한다.

이동시간은 ms이며 1000가 1초이다.

 

4. 조립

이제 이 모든 내용을 합치면 다음과 같다

  $(window).scroll(function( ){
        var position = $(window).scrollTop()+35;
      $( "#banner" ).stop().animate({top:position+"px"}, 800);
   });