제이쿼리 전체화면 스크롤 fullpage.js

 

fullpage.js는 웹 사이트에서 스크롤하면 페이지 단위로 움직이는 제이쿼리 플러그인이다.

 

 

과거, 현재, 미래를 나타내는 인트로 페이지를 만들어야 해서 고민하다가

단순하면서도 화면 단위의 움직임을 보여줄 수 있는 fullpage.js 플러그인을 사용하기로 했다.

 

 

하지만 자바스크립트 충돌로 인해 다른 기능들이 안 먹힐 때도 있어서 단순한 화면구조로 사용할 때만 추천한다!

 

 

 

https://alvarotrigo.com/fullPage/ko/

 

 

#버전

fullpage 플러그인은 예전에 무료였는데 유료화되었다..

그래서 버전 2는 무료지만 버전 3은 라이선스 키가 필요하다.

 

 

fullPage.js 버전 2.9.7 다운로드

 

fullPage.js-2.9.7.zip

8.36MB

 

 

 

공홈에서는 상업용으로 배포하지만 깃허브에서 오픈소스를 제공하고 있다. (오픈소스 사용 시에도 옵션에 라이센스 키는 넣어줘야 함) 목적에 맞게 라이선스를 구입하여 사용하면 될 듯 

 

깃허브에 사용방법도 잘 나와있으니 참고하시길..

 

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

alvarotrigo/fullPage.js

 

#HTML 구조 작성

이제 적용할 차례다.

먼저, HTML에서 fullpage를 적용할 영역을 작성한다.

 

기본 구조

<div id="fullpage">
	<div class="section">Some section1</div>
	<div class="section">Some section2</div>
	<div class="section">Some section3</div>
	<div class="section">Some section4</div>
</div>

 

 

난 슬라이드를 적용하고, 앵커를 넣기 위해 아래와 같이 HTML 구조를 작성했다.(참고)

<div id="fullpage">
	<div id="section1" class="section first"></div>
	<div id="section2" class="section second">
		  <div class="slide" data-anchor="slide1"> Slide 1 </div>
		  <div class="slide" data-anchor="slide2"> Slide 2 </div>
	</div>

	<div id="section3" class="section third">
		  <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>

	<div id="section4" class="section fourth">
	</div>
</div>

 

 

#플러그인 적용

플러그인 파일을 다운로드한 후 css, js파일을 적용시킨다.

 

※ 이 때 파일을 저장한 경로에 맞게 지정해야 한다.

<!--버전 2-->
<link href="jquery.fullPage.css" rel="stylesheet" type="text/css"/> 
<script type="text/javascript" src="jquery.fullPage.js"></script> 

<!--버전 3-->
<link href="fullpage.css" rel="stylesheet" type="text/css"/> 
<script type="text/javascript" src="fullpage.js"></script> 

 

#자바스크립트 호출

다음은 자바 스크립트에서 fullpage를 호출한다.

 

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

 

#옵션

자신의 웹사이트에 맞는 옵션을 적용시켜주면 된다.

이 때 다양한 옵션들이 있으니 이리저리 바꿔가며 자신에게 맞는 옵션을 적용할 것!

 

난 아래와 같은 방법으로 옵션을 적용했다.

 

 

sectionsColor
섹션 배경색 지정

navigationTooltips
내비게이션 안에 들어갈 텍스트

sectionSelector, slideSelector
섹션, 슬라이드 클래스명 지정

 

 

이렇게 다양한 옵션을 자신의 웹사이트에 적용할 수 있다.

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'},
		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){}
});

 

#CSS 수정

이제 css파일을 수정해서 색이나 크기, 컬러를 변경해보자.

내비게이션 적용할 때 디폴트 색이 #333이라 오렌지 색으로 변경하고,

border값을 추가해 보았다.

border:4px solid rgba(255,255,255,0.4)

 

fullpage.js 적용 예시

쉽지만 페이지 단위로 움직이기 때문에 시각적으로 큰 효과가 있다. 

 

단순하지만 복잡한 애니메이션 없이 큰 효과를 보고 싶다면 추천!