1.0.3 • Published 3 years ago
@kaito_kuroba/my-fullpage v1.0.3
��# my-fullPage
�(u�Nvue3 �vhQO\�n�R�~�N
Demo
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%;
}