• 북마크
  • 1:1문의
  • 새글
  • 회원가입
  • 로그인

이윰빌더

  • Home
  • 스터디
  • 이윰빌더

원페이지 스크롤 쉽게 만드는 방법

8,985 2016.09.07 16:21

짧은주소

본문

데모 : 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년꺼 두개가 있어요 당연히 최신꺼를 사용하시면 됩니다.

 

 

 

 

 

0
좋아요!
1
- red123 메일보내기 아이디로 검색 - 회원등급 : 새싹/Level 10 - 포인트 : 2,792
레벨 10
경험치 10,166

Progress Bar 59%

- 가입일 : 2015-03-16 21:00:17
- 서명 :
- 자기소개 :
댓글목록

레오나르도님의 댓글

fullPage.js 플러그인이군요. 한번씩 사용하는 플러그인인데... 활용도가 좋은것 같아요.^^

축하합니다. 첫댓글 포인트 15포인트를 획득하였습니다.

red123님의 댓글

저는 이윰의  basic2  에서 스크롤 하면 특정(상/하) 위치로 흘러가듯 이동하는 것을 원했는데
그렇게 하기에 손을 많이 대야 할것 같더라고요

유사한 형태의 원페이지 형식으로 갈 경우는 도움이 많이 될듯 합니다.

저는 좀더 단순하고 제가 원하는 기능을 바로 구현할 수 있는 것들을 찾아보려고요 ㅠㅠ
혹 괜찮은 라이브러리가 있으면 레오나르도님의 정보도 공유를 좀 해주실 수 있으신지요? ^^

red123님의 댓글

시간상 문제로 외부 라이브러리 몇개 테스트만 해보고
결국 적용은 접게 되었습니다.

제가 원했던건 각기 다른 크기의  div 사이를 자동 스크롤로 이동이 되기를 원했는데
이 부분에 대한 구현이 쉽지 않네요.

다음 제가 해결하는 날 이 곳에 업데이트 해 놓아야 겠어요  ^^
조금 아쉽습니다

artrior님의 댓글

좋네요

Total 42건 1 페이지
번호 제목 글쓴이 날짜 추천
42 red123 아이디로 검색 2017.03.09 1,666 0
41 red123 아이디로 검색 2017.03.07 2,132 0
40 red123 아이디로 검색 2017.03.07 1,544 1
39 이윰EGG 아이디로 검색 2016.11.28 1,439 0
38 red123 아이디로 검색 2016.11.03 1,961 0
37 red123 아이디로 검색 2016.11.02 1,519 0
36 red123 아이디로 검색 2016.11.01 2,001 0
35 red123 아이디로 검색 2016.11.01 1,531 1
34 이윰EGG 아이디로 검색 2016.09.28 1,428 0
33 red123 아이디로 검색 2016.09.23 1,269 0
32 red123 아이디로 검색 2016.09.23 1,356 0
31 red123 아이디로 검색 2016.09.23 3,264 0
열람 red123 아이디로 검색 2016.09.07 8,986 0
29 이윰EGG 아이디로 검색 2016.06.13 1,948 0
28 이윰EGG 아이디로 검색 2016.05.13 3,739 2
27 이윰EGG 아이디로 검색 2016.04.18 3,770 5
26 red123 아이디로 검색 2016.04.08 2,870 0
25 칠천피트 아이디로 검색 2016.03.13 2,406 1
24 이윰EGG 아이디로 검색 2016.02.15 2,673 1
23 이윰EGG 아이디로 검색 2016.01.21 2,109 0
LOGIN
사이드 메뉴

최신글이 없습니다.

최신글이 없습니다.

출석 랭킹

오늘의 랭킹

회원사진

닉네임

개근왕

최다1위

shadow shadow
Ranking

    출력할 랭킹이 없습니다.

  • 01 shadow
    674,374
  • 02 신비
    335,419
  • 03 가을하늘
    204,735
  • 04 mame
    202,630
  • 05 이윰MOUNT
    199,181
  • 06 미스코리아
    163,939
  • 07 레오나르도
    147,576
  • 08 테크니션
    142,655
  • 09 이윰IN
    135,258
  • 10 비온뒤맑음
    127,882
  • 01 shadow
    28,938
  • 02 joosam
    23,606
  • 03 티보리
    21,954
  • 04 홍인
    18,644
  • 05 레오나르도
    18,088
  • 06 이윰IN
    17,983
  • 07 도깨비
    16,614
  • 08 이윰EGG
    16,105
  • 09 자이언트
    14,698
  • 10 미스트
    14,379