-
[plug-in] Fullpage.js 사용 방법
beaksul
2022. 1. 10. 14:25
https://alvarotrigo.com/fullPage/ko/
fullPage scroll snapping. Create full screen pages fast and simple
Mouse wheel snap to sections. Fast and simple to use.
alvarotrigo.com
https://github.com/alvarotrigo/fullPage.js/tree/master/dist
위 링크에서 fullpage.css와 fullpage.js를 다운로드한 뒤
html파일에 링크한다.
<head>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="fullpage.js"></script>
<link rel="stylesheet" href="fullpage.css">
</head>
section이라는 class로 영역을 구분해주어야 한다. (section 하나당 한페이지)
fullpage 자체에서 슬라이드도 지원하고 있어서 슬라이드를 사용하려면 아래처럼 section안에 slide라는 클래스를 추가해주면 된다. 슬라이드에 앵커를 사용하려면 data-anchor 추가
<div class="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section">
<div class="slide" data-anchor="slide1">
slide1
</div>
<div class="slide" data-anchor="slide2">
slide2
</div>
</div>
<div class="section"></div>
<div class="section"></div>
</div>
fullpage에 관련된 다양한 옵션들은 js파일에서 적용할 수 있다.
$("document").ready(function(){
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){}
});
})
- origin
활성화된 구역
- destination
목적지 구역
- direction
마우스 휠 방향 (업다운)
- onLeave
구역을 떠나고 새로운 구역으로 이동 도중에 이벤트가 실행
- afterLoad
구역을 불러들이고나서 스크롤이 끝나면 이벤트가 실행
- afterSlideLoad
해당 슬라이드가 동작 이후 이벤트가 실행