FullPageScroll 是一個簡單且輕便的一頁捲動效果的 javascript 套件。

只要讀取後：

<!-- fullPage Javascript file -->
<script src="/js/fullPage.min.js"></script>

 

設置 HTML：

<div id="main">
	<section class="section"></section>
	<section class="section"></section>
	<section class="section"></section>
	<section class="section"></section>
</div>

 

就可以套用了。

var page = new FullPage("#main");

 

該套件提供可以設定的內容如下：

var page = new FullPage("#main",{

    // section selector
    section: '.section',

    // animation options
    animationDuration: 700,
    animationTiming: 'ease',
    animationTranform: 'transform',

    // enable side navigation
    pagination: true,

    // enable keyboard navigation
    keyboard: true,

    // enable touch events
    touch: true,

    // touch limit in ms
    touchLimit: 100,

    // infinite loop
    loop: false,

    // callbacks
    onLeave: null,
    afterLoad: null,
    
});