본문 바로가기
블로그

스크롤을 따라 자연스럽게 움직이는 플로팅 배너 설치방법

by e마루 2011. 2. 17.
리얼센스 같이 플로팅 배너를 허용하는 광고를 사이드나 본문에 설치하는 방법입니다.

본문을 가리는 배너를 띄울 수도 있고, 사이드에 플로팅 배너를 달 수도 있겠죠. 소스를 활용하면 단순한 광고 뿐 아니라 추천버튼이나 트윗팔로워 버튼등 다른 여러가지로 활용할 수 있습니다.

단, 티스토리에서 본문글을 가리는 배너광고는 블라인드 대상이 되니, 본문을 가리는 광고는 피하시는 것이 좋겠죠.



해당 소스는 제가 직접 작성한 것이 아닌, 러브드웹의 윤초딩님이 작성하신 소스입니다. 

아무래도 직접 소스를 제작하신 윤초딩님 실력이 훨씬 뛰어나니, 위의 원본글을 보니는 것이 좋을 수도 있겠죠.
이글은 나중에 제가 스킨을 변경할 때 다시 소스를 찾기 어려울 것 같아... 스스로 알기 쉽게 써 놓은 것입니다.
많은 분들이 설치 후에 창의 크기에 따라 배너가 본문을 가린다고 하셔서 관련부분을 추가했습니다.

  자연스러운 스크롤 배너 설치  

윤초딩님께서 만드신 스크립트는 레이어를 닫게 할 수 있는 것과 페이지 상단으로 바로 이동할 수 있는 기능이 포함되어 있습니다.
하지만, 저는 광고로만 사용할 것이기 때문에 두가지 기능을 제외시키고 단순히 스크롤을 따라 스르륵 움직이는 레이어를 적용시키는 방법만 사용하였습니다.

스르륵 움직이는 레이어 설치 방법은 아래의 두가지 작업을 하면 됩니다. 
1. util.js 파일을 자신의 티스토리에 파일 업로드
2. 티스토리 Skin.html에 소스 추가

1. 첨부파일을 다운 받으시기 바랍니다.
scroll.zip

top html.txt
(scroll.zip의 top.html 파일이 깨져서 안보인다는 분이 계셔서 txt도 함께 올립니다.)

러브드웹의 윤초딩님 소스에서 Top으로 가는 소스 등의 스크립트를 삭제한 소스입니다. 
압축을 풀면 util.js와 top.htm 2개의 파일이 있습니다.

2. util.js 파일을 자신의 티스토리 계정에 업로드 합니다.

3. 티스토리 스킨에 아래의 소스를 추가합니다.
<head></head> 사이에 아래의 소스를 추가합니다. 첨부파일인 top.htm의 윗쪽 부분입니다.
 <script type="text/javascript" src="util.js"></script>
 <script type="text/javascript">
        var stmnLEFT = 10; // 우측 여백
        var stmnGAP1 = 0; // 위쪽 여백 
        var stmnGAP2 = 550; // 스크롤시 브라우저 위쪽과 떨어지는 거리 
        var stmnBASE = 550; // 스크롤 시작위치 
        var stmnActivateSpeed = 35; 
        var stmnScrollSpeed = 20; 
        var stmnTimer; 

function RefreshStaticMenu() { 
        var stmnStartPoint, stmnEndPoint; 
        stmnStartPoint = parseInt(document.getElementById('STATICMENU').style.top, 10); 
        stmnEndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + stmnGAP2; 
        if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1; 
        if (stmnStartPoint != stmnEndPoint) { 
        stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 ); 
        document.getElementById('STATICMENU').style.top = parseInt(document.getElementById('STATICMENU').style.top, 10) +       ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px'; 
         stmnRefreshTimer = stmnScrollSpeed; 
        }
        stmnTimer = setTimeout("RefreshStaticMenu();", stmnActivateSpeed); 
} 

function InitializeStaticMenu() {
      document.getElementById('STATICMENU').style.right = stmnLEFT + 'px'; 
      document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnBASE + 'px'; 
      RefreshStaticMenu();
}
 </script>

<body> 부분에 아래의 붉은색 소스를 추가합니다.
 <body id="tt-body-page" onload="InitializeStaticMenu();">

<body> 아래쪽에 있는 <div id="header">를 찾아 바로 밑에 아래의 소스를 삽입해 줍니다.
이것은 header를 기준으로 광고의 위치를 기준 잡으려고 하는 것입니다. 
  <!-- 좌측 스크롤 배너 시작 -->
  <div style="position:relative;width:0px;height:0px">
  <div id="STATICMENU">

  스크롤 배너 안에 보여질 이미지나 광고 소스( 예. 리얼센스 스크립트)

  </SCRIPT>
  </div></div>
  <!-- 좌측 스크롤 배너 끝 -->

많은 분들이 은초딩님의 소스를 이용하면서 창 크기(해상도)에 따라 배너가 이동되어 본문을 가리는 경험을 하십니다.

위의 소스중 붉은색은 <div id="STATICMENU">라는 레이어를 다시 div style값을 주어 배너의 위치를 브라우저 기준이 아닌, header를 기준으로 상대적 위치를 잡아주는 겁니다.
따라서, 해상도나 창의 크기와 관계없이 언제나 header와의 거리를 계산되기 때문에 위치의 변화가 생기지 않습니다.
꼭 header를 기준으로 할 필요는 없고 자신이 원하는 기준점을 생각해서, 기준점이 되는 소스 바로 밑에 추가하시면 됩니다.

4. Style.css에 맨 밑에 아래 소스 추가 
   #STATICMENU { margin: 0pt; padding: 0pt;  position: absolute; right: 0px; top: 0px;}

5. 위치 조절 방법
배너의 상하, 좌우의 위치는 <body> 앞에 삽입한 소스의 빨간색 값을 변경하면 됩니다.
     var stmnLEFT = 10; // 우측 여백 
     var stmnGAP1 = 0; // 위쪽 여백 
     var stmnGAP2 = 550; // 스크롤시 브라우저 위쪽과 떨어지는 거리
     var stmnBASE = 550; // 스크롤 시작위치 

은초딩님께서 소스를 만드실 때, 좌우 기준을 우측으로 넣어 두셨다고 합니다.
왼쪽을 기준으로 넣고 싶으신 분들은 아래 부분을 붉은색 소스처럼 수정하면 된다고 하네요.

   document.getElementById('STATICMENU').style.right = stmnLEFT + 'px';
   document.getElementById('STATICMENU').style.left = stmnLEFT + 'px';

    #STATICMENU { margin: 0pt; padding: 0pt;  position: absolute; right: 0px; top: 0px;}
    #STATICMENU { margin: 0pt; padding: 0pt;  position: absolute; left: 0px; top: 0px;}


저작자표시 비영리 변경금지

'블로그' 카테고리의 다른 글

티스토리 초대장 나눠드립니다.[마감]  (36) 2011.02.24
다음 고객센터 "답변은 다음에~"  (4) 2011.02.23
화면에 고정된 듯 스크롤을 따라 움직이는 플로팅 배너 설치 방법  (94) 2011.02.18
리얼센스 플로팅 배너의 2가지 종류  (7) 2011.02.16
리얼센스의 본문을 가리는 플로팅 배너 효과  (23) 2011.02.12
다음View에서는 남의 블로그를 훔칠수 있다.  (4) 2011.02.10

관련글

티스토리툴바