[nuxt] fullpage 라이브러리 구현 01

코드 전체 보기
: https://github.com/dudrbrb/Vue.js/blob/main/pullpage-nuxt/pages/index.vue

fullpage demo gif

들어가며

여러가지 편리한 라이브러리가 많지만, 설치하고 불러오고 응용하는 과정을 못견디고 직접 구현을 해보았다.

야매이긴 하지만 결과는 매우 만족! 단 170줄로 무거운 라이브러리와 같은 기능을 구현해냈다.

 

scrollTo를 사용했을 때, 모바일 브라우져의 상단 주소창, 하단의 툴바 등의 영향으로부터 벗어나기 위해 나는 transfom을 이용했다.

구조 잡기

'.section'을 추가하면 그 숫자만큼 pagination을 만들어 내기 위해

page라는 변수 안에 '.section'을 담아 v-for로 pagination을 생성했다.

<template>
  <div class="container">
    <div class="section-wrapper">
      <div class="section-container">
        <div class="section">0</div>
        <div class="section">1</div>
        <div class="section">2</div>
        <div class="section">3</div>
      </div>
      <div class="pagination-wrapper">
        <div class="pagination" :class="{'active': pageIndex == index}" v-for="(n, index) in page" :key="'pagination' + index"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: null
    }
  },
  mounted() {
    this.page = this.$el.querySelectorAll('.section');
  }
}
 </script>

 

 

스타일은 fullpage를 구현하기 위해 width, height는 100%로 맞추어줬다.

그리고 transform을 이용할 예정이라 .section-container에게 transition을 줬다.

이 속도가 페이지가 넘어가는 속도가 될 것이다.

<style lang="scss">
.container{
  width: 100%;
  height: 100%;
  overflow: hidden;
  .section-wrapper{
    width: 100%;
    height: 100%;
    .section-container{
      width: 100%;
      height: 100%;
      transition: all 0.5s; //페이지가 넘어가는 속도
      .section {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 33px;
        font-weight: bold;
        position: relative;
        color: #fefefe;
        &:nth-child(1){
          background-color: rgb(255, 142, 50);
        }
        &:nth-child(2){
          background-color: rgb(255, 225, 94);
        }
        &:nth-child(3){
          background-color: rgb(156, 224, 110);
        }
        &:nth-child(4){
          background-color: rgb(109, 189, 255);
        }
      }
    }
    .pagination-wrapper{
      position: fixed;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      .pagination{
        width: 14px;
        height: 14px;
        border: 1px solid #fefefe;
        border-radius: 50%;
        &+.pagination{
          margin-top: 20px;
        }
        &.active{
          background-color: #fefefe;
        }
      }
    }
  }
}
</style>

 

이렇게 하면 기본 셋팅을 끝났다. 

현재 화면에는 스크롤도, 드래그도 안되는 페이지가 있을 것이다. 

 

다음 포스트에서 스크립트를 넣어보겠다.