회원 자료실

디엠샵의 디자인과 기능을 자유롭게 바꿔보세요.

TEXT

[스킨] Jquery Floater 플러그인을 이용한 부드럽게 따라다니는 스크롤박스

2013. 05. 25 19:12 3,754 0 6
첨부파일 (1)
DOWNLOAD

첨부 파일을 클릭하세요.

dm_shop.zip
(10.7KB)DOWN : 8

그동안 디엠샵에서 공부도 많이 하고 도움도 많이 받아 첫 공유 자료로 소소한 스크롤박스 스킨을 올려봅니다. ^^

디자인은 달라진 부분이 없고, CSS 수정과 스크립트만 추가되었습니다.

스크롤박스를 항상 사용하시는 분만 사용하세요.

 

다운받기 전 잠시 설명 -

 

기본 디폴트 스크롤박스는 js 파일을 열어보면, layout_contents의 위치로부터 left 값을 적용받아 위치를 잡습니다.

이것은 X축의 위치를 잡는 것이고, Y축(top)은 관리자에서 설정한 픽셀값을 적용받습니다. 

 

스킨을 수정하지 않았다면 top:170px 로 정의되어 있을텐데요. 근데 scrollbox.php 상단에 정의된 position:fixed 때문에

사용자가 스크롤을 수직으로 이동해도 스크롤박스는 항상 브라우져의 상단 끝지점부터 170px 떨어진 곳에 위치하게 됩니다.

 

따라다니니까 고맙긴 한데... (평소 여자가 좀 이렇게 따라다니면 좋을텐데) 뭔가 좀 재미가 없죠?

이것을 간단한 플러그인 추가로 부드럽게 따라다니는 스크롤 박스로 만들어 보았습니다.

 

Jquery Floater 예제 미리보기

 

첨부해드린 폴더를 열어보시면 기존 스크롤박스에는 없던 jquery.Floater.js 파일이 하나 추가되었습니다.

그리고 이 js파일을 이용해 스크롤박스에도 동적인 효과를 추가해주었습니다.

 

수정된 부분 - 

 

scrollbox.js : 관리자에서 입력한 top 픽셀값이 적용되던 부분을 없애고,

scrollbox.php : 상단 CSS중 

 

#scrollbox {display:none; right:0px; top:0px; position:fixed; z-index:9999; width:80px; background-color:#ffffff;}

이 부분을,

#scrollbox {display:inline; right:0px; top:180px; position:absolute; z-index:9999; width:80px; background-color:#ffffff;}

이렇게 수정.

 

scrollbox.php : 하단 스크립트에서

 

<script type="text/javascript">

var dmshop_scrollbox_path = "<?=$dmshop_scrollbox_path?>";

var scrollbox_top = <?=(int)($scrollbox_top);?>;

</script>

 

이 부분에,

 

<script type="text/javascript">

var dmshop_scrollbox_path = "<?=$dmshop_scrollbox_path?>";

var scrollbox_top = <?=(int)($scrollbox_top);?>;

<!--

$(document).ready(function(){

var options = { 'speed' : 400, // 스피드

                            'initTop':180 ,  // 기본 top 위치

                            'alwaysTop' : false, // 항상고정 true , false 이동

 

                           }

    $('#scrollbox').Floater(options);

});

//-->

</script>

 

Floater 관련 스크립트를 추가.

 

그리고 맨 하단에 <script type="text/javascript" src="<?=$dmshop_scrollbox_path?>/jquery.Floater.js"></script>를 추가하여,

Jquery Floater를 불러옵니다.

 

우선 이렇게 적용된 것을 폴더명만 달리하여 첨부하였으니 압축을 푸신 후 floater 폴더를 www/skin/scrollbox 에 업로드 하시고,

관리자에서 top 위치값을 입력하던 부분은 이 스킨에서 적용되지 않으니, 직접 scrollbox.php의 상단 스타일부분과 하단 주석처리된 스크립트에서 숫자를 수정해주시면 됩니다. 이동되는 스크롤 속도도 주석처리된 부분을 적절한 수치로 수정하시면 됩니다.

 

그리고 기본 CSS에서 #scrollbox 아이디 값이 display:none; 이었는데, 관리자의 설정과 관계없이 무조건 보이도록 display:inline; 으로 값을 수정했으니 스크롤박스를 메인과 서브에서 항상 사용하시는 분만 이 스킨을 사용하세요.

 

특별하게 큰 자료도 아닌데 설명을 하자니 참 힘드네요. ㅠㅠ

 

 

김동현정회원

관련 콘텐츠

  • 비회원
  • 작성자
  • 비밀번호
  • 취소

대댓글 작성

비밀번호를 입력하세요.

비밀번호
전선일 2013. 05. 27 (01:03)05.27 (01:03)
good!!!
퓨엘르 2013. 06. 01 (18:37)06.01 (18:37)
감사히 적용하겟습니다.
최선재 2013. 07. 10 (08:53)07.10 (08:53)
김동현님 질문하나합니다.
어느날 잘되된 오른쪽스크롤박스가 '고정되어' 있습니다.
페이지와 같이 움직이게 하려면 어느부분을 손봐야 하는지요?
유정현 2015. 02. 17 (20:43)02.17 (20:43)
감사합니다^^
최정훈 2015. 06. 04 (17:49)06.04 (17:49)
오호~ 감사합니다.
김수옥 2015. 07. 17 (22:52)07.17 (22:52)
감사합니다~
  • 전체 카테고리
  • 템플릿
  • 스킨
  • 게시판
  • 기타
    New 0 / All 41
    25개씩 보기
    • 25개씩 보기
    • 50개씩 보기
    • 100개씩 보기
      디엠샵 심플

      [템플릿]

      2,441192016. 04. 29
      구글 지도

      [스킨]

      2,643062012. 10. 08
      네이버 지도

      [스킨]

      3,648042012. 10. 06
      경매 게시판

      [스킨]

      5,2800202012. 10. 02
      Copyright © DMSHOP Corp. All Rights Reserved.