반응형
[javascript] 플로팅배너 만들기
제가 플로팅배너라는 개념을 처음 접했을 때, 전 스크롤이 긴 랜딩페이지나 홈페이지를 볼 때,
오른쪽 하단이나 상단에 따라오는 배너를 '퀵배너'라고 알고 있었는데요.
이것을 근래에 들어서야 퀵배너가 플로팅배너라고 불리는 것을 알게 되었습니다.
오늘은 스크롤에 따라 따라오지만 계속 멈춰서있는 듯한 플로팅배너와 스크롤을 열심히 쫓아오는 듯한 플로팅 배너
이렇게 두가지 버전을 만들어보려 합니다. 먼저 멈춰서있는 듯한 플로팅 배너부터 만들어보겠습니다.
</head> 안에 제이쿼리 스크립트를 넣어주세요.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
그 다음 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.
html,body {margin:0; padding:0; position: relative; height: 100%;}
#wrap {margin:0 auto;text-align:center;}
#quick_bg {margin:0 auto;text-align:center;width:960px;position:relative;}
#quick {position:absolute;z-index:2;top:15px;width:153px;right:0px;}
마지막으로 플로팅배너를 넣으려고 하는 페이지의 <body> 아래로 해당 html를 ctrl+c, ctrl+v해서 넣어주세요.
<div id="wrap">
<div id="quick_bg">
<div id="quick">
<a href="#form" style="position:fixed;margin-top:-17px"><img src="img/플로팅배너이미지.png" style="width:250px"></a>
</div>
</div>
</div>
멈춰서있는 듯한 플로팅 배너 페이지가 완성되었습니다.
다음은 스크롤을 열심히 쫓아오는 듯한 플로팅 배너를 만들어보겠습니다.
똑같이 </head> 안에 제이쿼리 스크립트를 넣어주시고 CSS에 해당 소스를 넣어주세요.
body {margin:0;}
#wrap {margin:0 auto;text-align:center;}
#quick_bg {margin:0 auto;text-align:center;width:1130px;position:relative;}
#quick {position:absolute;z-index:2;top:15px;width:153px;right:0px;}
#container {position:relative;}
그다음 javascript에 해당 소스를 넣어주세요.
var quick_menu = $('#quick');
var quick_top = 470;
quick_menu.css('top', $(window).height() );
$(document).ready(function(){
quick_menu.animate( { "top": $(document).scrollTop() + quick_top +"px" }, 200 );
$(window).scroll(function(){
quick_menu.stop();
quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 500 );
});
});
페이지의 <body> 아래로 해당 html를 ctrl+c, ctrl+v해서 넣어주면 끝이 납니다.
<div id="wrap">
<div id="container">
<div id="quick_bg">
<div id="quick">
<a href="#form"><img src="img/플로팅배너이미지.png"></a>
</div>
</div>
</div>
</div>
반응형
'[공부]하는 몽씨 > javascript' 카테고리의 다른 글
| [javascript] slideup 효과로 상단배너 숨기기 (0) | 2017.07.26 |
|---|---|
| [javascript] select box css 디자인 (0) | 2017.07.19 |
| [javascript] scroll top 위로가기 버튼 (0) | 2017.06.23 |
| [javascript] selectbox 선택에 따라 두번째 selectbox 값 변화 (3) | 2017.06.22 |
| [javascript] 간단한 탭메뉴 구현하기 (0) | 2017.06.19 |
