DIV 플로팅 베너

출처 : 

https://imivory.tistory.com/11?category=619948 

 

[javascript] 플로팅배너 만들기

[javascript] 플로팅배너 만들기  제가 플로팅배너라는 개념을 처음 접했을 때, 전 스크롤이 긴 랜딩페이지나 홈페이지를 볼 때, 오른쪽 하단이나 상단에 따라오는 배너를 '퀵배너'라고 알고 있었

imivory.tistory.com

 

 

 

 

[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>

 

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받고 있습니다.

이 포스팅은 제휴마케팅이 적용되어 작성자에게 일정액의 커미션이 제공될수 있습니다.

이 글을 공유하기

댓글

Designed by JB FACTORY

"웨딩박람회 일정 스드메 견적 웨딩플랜닷컴 "

주부알바 재택부업 앙팡펫파트너스

서민안심전환대출 ㅣ정부지원대출ㅣ채무통합대환대출