데모 : http://alvarotrigo.com/fullPage/#firstPage

소스 : https://github.com/alvarotrigo/fullPage.js#fullpagejs

소스를 다운받으면 제일 상위 폴더 (압축 해제해자 마자 들어가면 보이는 위치) 에 있는

jquery.fullPage.css

jquery.fullPage.min.js

해당 소스를 해당 위치에 있는 js와 css파일에 각각 복사해 넣습니다

*** 권한을 꼭 주세요.

    <link rel="stylesheet" type="text/css" href="<?php echo G5_CSS_URL ?>/jquery.fullPage.css">
    <script src="<?php echo G5_JS_URL ?>/jquery.fullPage.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#fullpage').fullpage();
        });
   </script>

이와 같은 소스를 root 폴더의 head.sub.php 파일의

</head> 위치 바로 위에 둡니다.

자 이제 스크롤링 적용할 파일을 열어

최상위 <div>의 바로 위에

<div id="fullpage">를 넣어줍니다 물론 제일 아래 부분으로 이동해 </div>를 입력해 줘야합니다.

그리고 이동될 원 페이지 or 이미지에  div class="section"를 넣어 줍니다.

class안의 이름은 여러가지가 동시에 들어갈 수 있습니다

예 ) div class="section test1 best_table"

나머지는 자신의 취향에 맞도록 크기와 디자인을 고려하여 css를 변경하면 됩니다.

해당 jquery.fullPage.min.js는 상위의 이동 뿐만 아니라 해당 페이지에서 좌우로 이동도 가능합니다.

데모에 가시면 배경을 영상으로 만들수도 있고

다양한 방법을 써보실 수 있어요.

그렇게 만드는데 어렵다고요? 그건 저도 잘 모르겠어요.

저도 공부중인데... 원래 가지가 스스로 무언가 해나간다는게 어려운거더라고요.

그럼 여러분들에게 큰 도움이 되시길 바라며...

*** 다운받은 파일의 js 파일은 2013년과 2015년꺼 두개가 있어요 당연히 최신꺼를 사용하시면 됩니다.