오른쪽우측에 스크롤되는 배너
페이지 정보
본문
좌측정렬일 경우는 left 값을 left:1000px; --> 좌측으로부터 떨어진 원하는 거리만큼 수정
중앙정렬일 경우는 left 값을 left:50%; margin-left:490px; --> 중앙에서 떨어진 거리만큼 수정(그누보드5의 기본 레이아웃인 경우 490px로 설정하니 적절하네요.)
위에서 부터의 거리는 top:200px; --> 위에서 부터 원하는 거리만큼 수정
이렇게 원하는 위치에 놓으시면 됩니다.
스크롤을 느리게 할 경우는 스크립트 소스에서 300이라는 숫자를 1000 정도로 올리시면 되고, 빠르게 할 경우는 100으로 줄이면 됩니다.
head.sub.php 소스에서
</head>태그 끝나기 전에
<script type="text/javascript">
$(function () {
var cssTop = parseInt($("#sky").css("top"));
$(window).scroll(function () {
var position = $(window).scrollTop();
$("#sky").stop().animate({ "top": (position + cssTop) + "px" }, 300);
});
});
</script>
코드를 붙여주시고요.
배너가 들어가기 원하는 곳에 아래와 같은 코드를 넣어주시면 됩니다.
저의 경우는 배너 이미지의 가로200px, 세로 200px 이미지를 사용했습니다.
이미지나 다른 컨텐츠를 삽입해주시고, 그 컨텐츠 크기에 맞게 div#sky의 가로(width), 세로(height) 크기를 변경해 주시면 됩니다.
사이트 전체에 스크롤 배너가 나타나게 할려면 head.sub.php 소스 마지막에 아래의 코드를 넣으면 되고,
상단(head)에 나타나기를 원하시면 head.php에서
<!-- 상단 시작 { -->
<div id="hd">
부부 바로 위에 넣으시면 되고요.
메인 페이지에 나나나기를 원하면 index.php 파일에 아래의 코드를 넣으시면 됩니다.
<div id="sky" style="position:absolute;z-index:100;top:200px;left:50%;margin-left:490px;width:200px; height:200px;border:1px solid gray;">
<a href="#"><img src="<?=G5_URL;?>/img/banner.gif"></a>
</div>
익스, 크롬, 파폭에서 모두 정상적으로 잘 동작하네요..!!!
관련링크
- 이전글최신글 세로리스트 스크롤업 배너 스킨 (2018-07-04 수정) 18.09.04
- 다음글오른쪽 고정자리에 떠있는 배너 18.09.04
댓글목록
등록된 댓글이 없습니다.