fullpage.js

옛슬·2021년 10월 18일

LIBRARY

목록 보기

2/7

overview

다양한 라이브러리에 적응하기 위해 일주일에 2-3개의 라이브러리 체험을 해보고 웹사이트에 간단하게 적용해보도록 하였다.
Fullpage.js 2.9.7 버전으로 작성 - console에 license관련 문구가 뜨지 않는다 😉
배운 모든 부분들을 Codepen에 적어보고 공유할 예정이다.

fullpage.js 란?

전체 화면 스크롤 웹사이트를 만드는 간단하고 쓰기 쉬운 라이브러리
웹사이트 구역 안에 수평 방향 슬라이더를 추가할 수 있음.

fullpage.js website

웹사이트
https://alvarotrigo.com/fullPage/ko/
doc
https://github.com/alvarotrigo/fullPage.js/#fullpagejs

배운거 위주로 정리하기 😎🖤💻

<header>
        <nav>
            <ul>
                <li data-menuanchor="section1"><a href="#section1">section 1</a></li>
                <li data-menuanchor="section2"><a href="#section2">section 2</a></li>
                <li data-menuanchor="section3"><a href="#section3">section 3</a></li>
                <li data-menuanchor="section4"><a href="#section4">section 4</a></li>
                <li data-menuanchor="footer"><a href="#footer">footer</a></li>
            </ul>
        </nav>

data-menuanchor 속성을 사용하여 각 섹션에 해당되는 메뉴를 만들 수 있다.
3.0.2 ver 에는 data-anchor

$(function () {
    $('#fullpage').fullpage({
        anchors: ['section1','section2','section3','section4','footer'],
	});
})

anchors에 data-menuanchor에쓴 값을 배열 값으로 넣어주면 연결이 된다.

HTML - SECTIONS

 <main id="fullpage">
        <section class="section">
            <h2>section 1</h2>
        </section>
        <section class="section">
            <div class="slide">
                <h3>slide 01</h3>
            </div>
            <div class="slide">
                <h3>slide 02</h3>
            </div>
            <div class="slide">
                <h3>slide 03</h3>
            </div>
        </section>
        <section class="section">
            <h2>section 3</h2>
        </section>
        <section class="section">
            <h2>section 4</h2>
        </section>
        <footer class="section fp-auto-height">
            <h2>footer</h2>
            <p>
                요건  <br />
               높이 약간 <br />
                올리기 위한 용
            </p>
        </footer>
    </main>

섹션의 부모태그에 id="fullpage"를 추가해주면 fullpage가 사용된다.
자식태그에는 class="section" 입력시 fullpage의 section으로 구성이 된다
fullpage의 section으로 구성된다는 의미는 viewport height를 가지게 된다는 것!
클래스에 fp-auto-height 추가 입력시 auto-height를 갖게 된다.

JS - 그 외에 사용해본 것

$(function () {
    $('#fullpage').fullpage({
        anchors: ['section1','section2','section3','section4','footer'],
		autoScrolling:true,
        navigation: true,
        navigationPosition: 'right',
        sectionsColor: ['#6fd1ab', '#7ae2ba', '#95efcc', '#aff9dd', '#d9fff0'],
        loopBottom: true,
        slidesNavigation: true,
        slidesNavPosition: 'top'
	});
})

autoScrolling : 기본값(true) | false
└─ 스크롤 한번에 다음섹션으로 바로 이동되는지에 대한 옵션
navigation : 기본값(false) | true
└─ 이동 막대기 유무
navigationPosition : 기본값(none) | left | right
└─ 이동 막대기가 보여지는 위치를 정의
sectionsColor : 기본값(none)
└─ 각 섹션별의 background-color를 정의한다.
loopBottom : 기본값(false) | true
└─ 마지막 섹션에서 스크롤을 내릴시 다시 첫번째 섹션으로 돌아갈지에 대한 옵션
slideNavigation : 기본값(false) | true
└─ 슬라이드 이동 막대기 유무
navigationPosition : 기본값(none) | top | bottom
└─ 슬라이드 이동 막대기가 보여지는 위치를 정의

CSS - 커스텀하기

slider의 navigation 위치변경하기

.fp-slidesNav{
    position: absolute;
    z-index: 4;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    left: 50% !important;
    transform: translateX(-50%);
    /* right: 0; */
    margin: 0 auto !important;
}

Arrow 변경하기

.fp-controlArrow {
    padding: 1rem;
    box-shadow: 1px -1px 0 1px #fff inset;
    -webkit-box-shadow: 2px -2px #fff inset;
    border: solid transparent;
    transition: 0.2s;
}
.fp-controlArrow:hover{
    box-shadow: 2px -2px 0 2px #ddd inset;
    -webkit-box-shadow: 4px -4px #ddd inset;
}

.fp-controlArrow.fp-prev {
    left: 50px;
    border-width: 0 0 2rem 2rem;
    border: solid transparent;
    width: auto;
    transform: rotate(45deg);
}

.fp-controlArrow.fp-next {
    right: 50px;
    border-width: 0 0 2rem 2rem;  
    border: solid transparent;
    transform: rotate(225deg);
}

여기서 중요한 점은 기존 fullpage.css를 변경하는 작업으로 직접 들어가서 수정하거나 들여쓰기 용으로 기존 css를 리셋하고
다시 입력하는 방법이 있다.
나의 경우 연습할 때는 fullpage.css에서 직접 변경했지만 codepen에 입력시에는 바로 변경이 어렵기 때문에 들여쓰는 방법으로 적어서 width:auto같은 reset해주는 css를 볼 수 있다 😉❣