제 블로그의 오른쪽에 리얼센스 광고가 플로팅 스크롤되어 위 아래로 움직이고 있습니다. 웹 2.0이 도래하면서 Javascript Library중 각광받고 있는 jQuery는 자바스크립트 기반이기는 하지만, 기존의 스크립트 코딩방식과 차이가 있습니다. 어떤 기능을 하는 함수를 구현할려면 기존의 코딩으로 5라인의 코드가 있다면, jQuery는 단 하나의 Function으로 구현할 수 있습니다.
자 이제, 저 스크롤 코드를 분석해보도록 하겠습니다.
2012/05/21 - [Development/JQuery] - JQuery 사용 시 필요한 js 파일 로드 하기
먼저 jQuery가 홈페이지에 로드되어 있다는 가정하에 이하 코드를 설명하겠습니다.
<!-- 리얼 클릭 스크롤 배너 -->
<div id="[Value]" style="position:absolute; top:0px; right:0px; width:0px; height:0px; z-index:1; ">
<!-- 리얼클릭 광고 위치 -->
</div>
div 레이어는 티스토리 스킨 기준으로 <div id="header">밑에 넣고, [Value]는 원하시는 id를 넣어 주시면 됩니다. 물론 광고도 삽입해야 되겠지요?
아, 한가지 말씀드리자면, 저런 방식으로 레이어를 직접 꾸미세요, 위에 태그는 한 예이며, 동작이 안될 수도 있습니다. 저는 div 레이어 두개와 <table> 태그를 사용하여 플로팅을 만들었습니다.
다음으로 중요한 jQuery를 삽입해 보겠습니다.
jQuery 코드는 두가지 방식이 있는데, jQuery의 버전이나 웹 브라우저의 환경에 따라 구동이 안되는 방식이 있기 때문에, 두가지 방식 중에 하나를 선택하여 코드를 삽입해 주세요.
방식 1
<!-- '$' alias가 인식이 될 때 타입 1 -->
<!-- </body> 위에 위치하는 스크립트 -->
<script type="text/javascript">
var realclick = $('#[ID]'); /* div의 id 속성 값을 입력 */
var realclick_top = 20; /* div layer top position */
/* realick scroll initialization */
realclick.css('top', 20 ); /* 초기 페이지가 로딩되었을 때 광고 top 위치 */
$(document).ready(function(){ /* 페이지 로딩이 완료되었을 때 */
/**
div를 애니메이트 시키는 함수 animate( 속성, 동작시간 )
@param 속성: 애니메이트할 속성 지정
@param 동작시간: ms동안 애니메이트 (수치가 낮을 수록 빠르게 동작)
*/
realclick.animate( { "top": $(document).scrollTop() + realclick_top + "px" }, 0 );
$(window).scroll(function(){
realclick.stop(); /* 이전의 동작을 중지 */
/* 1초 동안 위치 이동 */
realclick.animate( { "top": $(document).scrollTop() + realclick_top + "px" }, 1000 );
});
});
</script>
방식 2
<!-- '$' alias가 인식이 되지 않을 때 타입 2 -->
<!-- </body> 위에 위치하는 스크립트 -->
<script type="text/javascript">
var realclick = jQuery('div[id="ID"]'); /* div의 id 속성 값을 입력 */
var realclick_top = 20; /* div layer top position */
/* realick scroll initialization */
realclick.css('top', 20 ); /* 초기 페이지가 로딩되었을 때 광고 top 위치 */
jQuery (document).ready(function(){ /* 페이지 로딩이 완료되었을 때 */
/**
div를 애니메이트 시키는 함수 animate( 속성, 동작시간 )
@param 속성: 애니메이트할 속성 지정
@param 동작시간: ms동안 애니메이트 (수치가 낮을 수록 빠르게 동작)
*/
realclick.animate( { "top": jQuery (document).scrollTop() + realclick_top + "px" }, 0 );
jQuery (window).scroll(function(){
realclick.stop(); /* 이전의 동작을 중지 */
/* 1초 동안 위치 이동 */
realclick.animate( { "top": jQuery (document).scrollTop() + realclick_top + "px" }, 1000 );
});
});
</script>
방식 1과 2의 차이는 $냐 jQuery냐 밖에 없습니다. 저는 방식 2번으로 구동하고 있구요. 스크립트를 올릴테니 다운 받으셔서 넣으셔도 됩니다.
<head>에 <script src="js 경로"></script> 를 넣어고, </body> 위에 scrolling(id, top)을 로딩 시켜주면 되는 파일입니다. div id와 위치를 넣으면 원하는 값으로 스크롤 플로팅을 하실 수 있습니다.
scrolling.zip
