[JQuery] 플로팅 배너 만들기

플로팅 배너, 따라다니는 배너 만들기

플로팅 배너는 말 그대로 페이지 내에 떠있는 배너를 말한다.

플로팅 배너를 고정형과 이동형 2가지로 구분할 수 있다

고정형 플로팅배너

웹페이지에서 배너 위치는 고정되어 있고 스크롤하면 따라 움직이는데 육안으로는 움직이는 느낌보다는 배너가 고정되어 있는 느낌을 준다.

이동형 플로팅배너

스크롤하면 배너가 스르륵 따라서 움직이는 형식

예제로 만들어 볼 것은 이동형 플로팅배너!!

🎈 HTML

<main class="main">
  <div class="floating">
    <p>
      data
    </p>
  </div>
</main>

🎈 CSS

.main {
  height: 500vh;
}
.floating {
  position: absolute;
  top: 50%;
  transform : translateY(-50%);
  width: 10vw;
  height: 20vw;
  background: coral;
}

🎈 SCRIPT

animate()를 이용하여 자연스럽게 동작할 수 있고, 옵션으로 속도 값을 지정할 수 있다.

속도 값으로 'slow', 'fast' 와 같은 문자값을 넣어도 되고 밀리세컨드 단위의 숫자를 넣을 수도 있다.

해당소스코드에는 500ms지정되어있는데 원하는 속도로 지정해 주면 된다.

$(function() {
  
  var currentPosition = parseInt($(".floating").css("top"));
  
	$(window).scroll(function () {
	
    // 스크롤할때 배너가 따라다니게 하기
    var position = $(window).scrollTop();
    $(".floating").stop().animate({ top: position + currentPosition + "px" }, 500);

  });
})

See the Pen JQuery : 따라다니는 배너 by 쓴미나리 (@uyjljkqd) on CodePen.