1.0.3 • Published 3 years ago

@kaito_kuroba/my-fullpage v1.0.3

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

��# my-fullPage

�(u�Nvue3 �vhQO\�n�R�~�N

Demo

�g wo:y

Getting Started

npm install --save @kaito_kuroba/my-fullpage

Using my-fullPage

ts

import MyFullPage from '@kaito_kuroba/my-fullpage' // _eQ�~�N

const allPage = ref(HTMLHTMLDivElement) // ���Su�b�dom

const fullPage = new MyFullPage() // R�^�[�O

// (W�~�N�R}��[bTR�YS
onMounted(() => {
  /***
   *   allPage => >f:yu�b�dom
   */
  fullPage.init(allPage: HTMLDivElement) // R�YS 
})

// ꁚ[IN�nn��N�N
document.onwheel = handleScroll
document.addEventListener('wheel', handleScroll)
function handleScroll(e: any) {
  if (e.wheelDelta) {
    if (e.wheelDelta < 0)
      fullPage.next()
    else
      fullPage.prev()
  }
  else {
    if (e.detail > 0)
      fullPage.next()
    else
      fullPage.prev()
  }
}
  <div class="view">
    <div ref="allPage" class="view-page">
      <div class="item ">
       
      </div>
      <div class="item">
        
      </div>
      <div class="item">
       
      </div>
      <div class="item">
        
      </div>
    </div>
  </div>
.view{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.view-page{
  position: absolute;
  top:0%;
  height: 100%;
  width: 100%;
  transition: all ease-in-out 1.4s;
}
.item{
  height: 100%;
  width: 100%;
}