[제이쿼리] 03. 마우스휠 내릴때 100% 전체화면 나타내기 (feat. fullpage.js 라이브러리 사용법)

728x90

=== Prologue ===

웹에이전시에 일하면서 다양한 레이아웃들을 접하게 되는데
그중 메인 페이지에 꽤 자주 사용하게 되는 기능을 알게 되었다.
동적이라, 웹사이트 자체가 심심해 보이지는 않지만
사실 한물 간.. 스타일이라고 듣긴 했다. (요즘 워낙 가로스 크롤링이며, 다양한 이벤트들이 많다 보니)

아무튼 알아두면 좋은 fullpage.js 사용법을 알아보자.

fullpage 기능이 들어간 사이트 예시01

fullpage 기능이 들어간 사이트 예시02

==== Mission ====

fullpage.js 라이브러리를 사용해 메인 페이지를 완성해 보자
자주 사용되는 옵션들을 정리해본다.

=== description ===

1. 사실 라이브러리들은 사용법만 익히면 정말 간단하다.
구조를 만들어 준다음(id와 class를 부여하고)

2. 스크립트를 삽입 후, 불러온다.

또는 CDN 방식으로 불러올 수 있다.

** 상업적 이용 금지

//css 부분은 옵션
<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- This following line is optional. 
Only necessary if you use the option css3:false and 
you want to use other easing effects rather than "easeInOutCubic". -->
<script src="vendors/easings.min.js"></script>


// js 파일은 필수
<!-- This following line is only necessary 
in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

cdn 파일 다운은 여기서 ▼

https://cdnjs.com/libraries/fullPage.js

fullPage.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Create beautiful fullscreen snap scrolling websites - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudf

cdnjs.com

3. 원하는 기능들을 추가하여 customizing 한다.
- 속도, 반응형일 때, 내비게이션 여부 등등

==== detail progress ====

✨<html 구조>

id값과 class는 지정해줘야 한다 (필수)

각 section 별로 필수로 id값을 지정해야 하는지는 모르겠다.

(주임님은 넣으셨던 것 같은데 이건 더 알아봐야겠다.)

<div id="fullpage">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

✨<jquery 부분>

이 부분이 기본 세팅이다. (공식 문서)

options 부분에 원하는 기능을 추가할 수 있다.

스크롤링 속도의 기본값은 700이며, 수정 가능하다.

$(document).ready(function() {
	$('#fullpage').fullpage({
		//options here
		autoScrolling:true,
		scrollHorizontally: true
	});

	//methods
	$.fn.fullpage.setAllowScrolling(false);
});

✨<js 사용 시>

-- 제이쿼리 또는 js 둘 중 하나만 사용하시면 됩니다.

new fullpage('#fullpage', {
	//options here
	autoScrolling:true,
	scrollHorizontally: true
});

//methods
fullpage_api.setAllowScrolling(false);

<알아두면 좋은 옵션들 >

** 사실 다양한 옵션을 알고 있으면 좋지만 실무에서는 모두가 활용되는 것은 아니다.
이런 것이 있구나 하고 알고 있다가 필요할 때마다 찾아서 쓰면 된다.

공식문서에서 가져온 옵션 기능들이다.

바닐라 js를 기준으로 작성되었으며, 본인이 원하는 기능들을 찾아 추가해주면 된다.

	new fullpage('#fullpage', {
		//이동
		menu: '#menu',
		lockAnchors: false,
		anchors:['firstPage', 'secondPage'],
		navigation: false,
		navigationPosition: 'right',
		navigationTooltips: ['firstSlide', 'secondSlide'],
		showActiveTooltip: false,
		slidesNavigation: false,
		slidesNavPosition: 'bottom',

		//스크롤
		css3: true,
		scrollingSpeed: 700,
		autoScrolling: true,
		fitToSection: true,
		fitToSectionDelay: 1000,
		scrollBar: false,
		easing: 'easeInOutCubic',
		easingcss3: 'ease',
		loopBottom: false,
		loopTop: false,
		loopHorizontal: true,
		continuousVertical: false,
		continuousHorizontal: false,
		scrollHorizontally: false,
		interlockedSlides: false,
		dragAndMove: false,
		offsetSections: false,
		resetSliders: false,
		fadingEffect: false,
		normalScrollElements: '#element1, .element2',
		scrollOverflow: false,
		scrollOverflowReset: false,
		scrollOverflowOptions: null,
		touchSensitivity: 15,
		bigSectionsDestination: null,

		//접근성
		keyboardScrolling: true,
		animateAnchor: true,
		recordHistory: true,

		//디자인
		controlArrows: true,
		verticalCentered: true,
		sectionsColor : ['#ccc', '#fff'],
		paddingTop: '3em',
		paddingBottom: '10px',
		fixedElements: '#header, .footer',
		responsiveWidth: 0,
		responsiveHeight: 0,
		responsiveSlides: false,
		parallax: false,
		parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
		dropEffect: false,
		dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
		waterEffect: false,
		waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
		cards: false,
		cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

		//맞춤 선택자
		sectionSelector: '.section',
		slideSelector: '.slide',

		lazyLoading: true,

	//사건(이벤트)
	onLeave: function(origin, destination, direction){},
	afterLoad: function(origin, destination, direction){},
	afterRender: function(){},
	afterResize: function(width, height){},
	afterReBuild: function(){},
	afterResponsive: function(isResponsive){},
	afterSlideLoad: function(section, origin, destination, direction){},
	onSlideLeave: function(section, origin, destination, direction){}
});

✨<많이 쓰이는 것들>

내비게이션 : navigation 건드리는 부분들
스크롤링 속도 : scrolling에 관한 부분들
원하는 링크에서 시작하기 : active클래스를 추가

- 먼저 로드하려면 active 클래스를 추가하면 된다.

(첫 번째 페이지 or 첫 번째 섹션이 로드되는 게 아니라 내가 원하는 페이지를 볼 수 있도록)

<div class="section active">Some section</div>

전체 화면 (한 페이지) 내에 자식 요소로 box가 있을 시에 구역 또는 슬라이드로 가는 링크 걸기

먼저 공식 문서를 참고해보면,

(◆ 공식문서의 내용은 배경색을 칠해놓고, 그에 따른 저만의 해설을 추가하였습니다.)

fullPage.js를 (anchors 옵션이나 각 구역마다 data-anchor 속성을 쓰셔서) 구역의 앵커 링크와 쓰신다면 앵커 링크를 통해 구역 내부 특정 슬라이드로 바로 가실 수 있습니다.

--> 각각의 box에 data-anchor 속성으로 이름을 정의해 준다.

그러면 이후에 도메인에 나와있는 링크 값으로 바로 연결되어 갈 수 있게 된다.

앵커가 들어간 링크 예시는 다음과 같습니다. http://alvarotrigo.com/fullPage/#secondPage/2 (해당 구역/슬라이드에 수동으로 가신다면 보시게 될 URL입니다) URL의 끝부분이 #secondPage/2로 끝나는 것에 주목해 주세요.

--> 예를 들면 위 예시의 주소가 도메인이 되는데 자식 요소로 box(슬라이드)를 감싸고 있는 큰 부모의 요소에도 각 클래스 또는 이름값이 정의되어 있어야 한다. anchors 이벤트를 추가하여 할 수 도 있고 두 번째 방법으로 보여줄 id값을 추가하여 정의할 수도 있다.

▼ 01. 공식문서를 따른다.

new fullpage('#fullpage', {
	anchors:['firstPage', 'secondPage', 'thirdPage']
});

#secondPage/2 URL 끝에 있는 앵커가 목적지 구역과 슬라이드를 각각 정의합니다. 이전 URL에서는 secondPage 앵커로 정의된 구역이 목적지이고, 목적지 슬라이드는 색인으로 2를 쓰고 있기 때문에 두 번째 슬라이드가 됩니다. (구역의 첫 번째 슬라이드는 엄밀히 말해 구역이기 때문에 색인이 0입니다.)

--> 위처럼 anchors 만 쓰게 되면 아래 slide를 정의할 때 index가 0,1,2부터 시작하니 #secondPage/2 이런 식으로 작성이 되지만,

<div class="section">
	<div class="slide" data-anchor="slide1"> Slide 1 </div>
	<div class="slide" data-anchor="slide2"> Slide 2 </div>
	<div class="slide" data-anchor="slide3"> Slide 3 </div>
	<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

--> data-anchor를 쓰게 되면 이전에 다뤘던 #secondPage/2와 동일한 역할을 하는 #secondPage/slide3 URL을 쓰게 된다.

※ 만약 anchors 배열이 없다면 data-anchor 속성을 써서 동일하게 구역 앵커를 정의할 수 있음을 기억해 주세요.

주의하세요! data-anchor 태그는 웹사이트에서 모든 ID 요소(또는 IE의 NAME 요소)와 동일한 값을 지닐 수 없습니다.

--> 이 말을 봐서는 id값과 겹치면 안 되므로, id값을 쓰지 않을 때에는 data-anchor 값을 부여, [01번 방식]

id 값을 부여할 때에는 [02번 방식]으로 하면 될듯하다!

▼ 02. 이런 식으로도 할 수 있다. (다른 사이트 참고)

위에서 내가 궁금해했던 id값을 필수로 주는지의 여부는

하위 클래스로 slide섹션이 있을 때 주면 좋은 옵션인 것 같다.

$(document).ready(function() {
    $('#fullpage').fullpage(); // initialization
});

<div id="fullpage">
    <div class="section">
        <div id="slide1" class="slide" data-anchor="slide1">slide1</div>
        <div id="slide2" class="slide" data-anchor="slide2">slide2</div>
    </div>
    <div class="section">
        <div id="slide3" class="slide" data-anchor="slide3">slide3</div>
        <div id="slide4" class="slide" data-anchor="slide4">slide4</div>
    </div>
</div>

<ul id="main-navi">
    <li><a href="#slide1">slide1</a></li>
    <li><a href="#slide2">slide2</a></li>
    <li><a href="#slide3">slide3</a></li>
    <li><a href="#slide4">slide4</a></li>
</ul>

<자체적으로 추가되는 상태를 나타내 주는 클래스>

상태 클래스는 중요하다! 특히 반응형 작업을 하게 될 때 구분해 주는 요소가 되기 때문이다.

또는 active와 같이 활성화될 때 추가되는 클래스들은 css를 수정해서 포인트를 줘야 할 때 쓰기 좋은 클래스이다.

<▼ 공식문서 내용 >

현재 보이는 구역과 슬라이드에 active가 추가됩니다.
(만약 menu 옵션을 쓰신다면) 현 메뉴 요소에 active가 추가됩니다.
웹사이트의 body 요소에 fp-viewing-SECTION-SLIDE 양식의 클래스가 추가됩니다. (예: fp-viewing-secondPage-0) SECTION과 SLIDE 부분이 현 구역과 슬라이드의 앵커가 (앵커가 없는 경우 색인이) 됩니다.
반응형 모드로 들어갈 때 fp-responsive가 body 요소에 추가됩니다.
fullpage.js가 활성화될 때 html 요소에 fp-enabled가 추가됩니다. (그리고 없어지면 제거됩니다.)
fullpage.js가 없어질 때 fullpage.js 컨테이너에 fp-destroyed가 추가됩니다.

==== Result ====

사실 fullpage의 옵션이 실무에서 엄청나게 적용되는 것은 아니지만
(풀 페이지 기능이 들어간다 하더라도 내비게이션 정도까지 만이다.
반응형 또한 모바일 버전에서는 풀 페이지 기능을 사용하지 않아 따로 설정을 해준다.)

웹사이트를 만들 때 다양한 라이브러리를 알아두게 되면 편하다.

사실 회사에 들어오기 전에는 직접 바닐라 js나 제이쿼리를 이용해서 계산하고, 함수 만들어서 실행시키고 했었는데..

라이브러리 주로 사용한다고 해서 (아니 대부분) 조금 반감이 들었다.

뭔가를 만들어내는 creator가 아니라 수집가가 되는 기분

(근데 이게 현실인 거 같다.)

그래서 월간 tech를 시작하지 않았는가 싶기도 하다.

또한 fullpage를 사용했을 때에는 waypoint 라이브러리와 함께 사용할 수 없다.
(offsetTop 값을 잡아주지 못하기 때문)

==== Reference====

<공식 사이트 - 예시>

https://alvarotrigo.com/fullPage/examples/noAnchor.html

No Anchor Links - fullPage.js

More Simple yet Sections won't contain anchor links. It's more simple to configure but a bit more restrictive.

alvarotrigo.com

<공식 문서 깃허브- 영문>

https://github.com/alvarotrigo/fullPage.js

GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple - GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

github.com

<공식 문서 깃허브- 한국어>

https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#fullpagejs