Project Motivation#

Recently, I received a new project: a full-screen scrolling single-page application.

Initially, I planned to write it entirely myself, but due to tight project deadlines, I opted to use the fullpage framework. This framework is indeed powerful, offering almost every API you could want, making it very convenient to use.

However, it also has a few drawbacks. Firstly, it requires jQuery, and its file size is quite large, which isn’t very mobile-friendly. So, I decided to use my spare time to write this project.

Project Repository

A Simple DEMO

Changelog#

V1.3.0

• Fixed Firefox support
• Added page navigation control
• Resolved some bugs

V1.1.0

• Added autoplay
• Added loop playback

V1.0.0

• Supported mobile touch control
• Added horizontal slide functionality
• Added PC keyboard control and mouse wheel control
• Provided practical APIs for convenient development

Introduction#

A lightweight fullpage framework that doesn’t rely on any other libraries, primarily targeting mobile devices (while also supporting desktops), and is less than 4kb when compressed. Easily create stunning single-page sliding websites.

Compatibility#

Usage#

• Include the JavaScript file fullpage.js
• Include the CSS file fullpage.css (if you’re using less, you can include fullpage.less in your main less file)
• Write your html code in the following format (where the element with id sectionContent is the wrapper, and you can customize its id)

<div id="sectionContent" class="fp-section-content">
        <div class="fp-section">
            <div class="fp-slide-wrap">
              <div class="fp-slide">1</div>
              <div class="fp-slide">2</div>
              <div class="fp-slide">3</div>
              <div class="fp-slide">4</div>
              <div class="fp-slide">5</div>
            </div>
          </div>
        <div class="fp-section">2</div>
        <div class="fp-section">3</div>
    </div>

Initialization#

For simple usage, just execute this after the page has loaded:

fullpage.init('#sectionContent');

If customization is required, use the following method:

 fullpage.init('#sectionContent',{
        threshold: 10,              //触发滚动事件的阈值，越小越灵敏
        pageSpeed: 600,             //滚屏速度，单位为毫秒 ms
        afterLoad: null,            //页面载入事件，具体查看下面的 afterLoad 函数
        beforeLeave: null           //页面离开事件，具体查看下面的 beforeLeave 函数
    });

##beforeLeave(leaveIndex,nowIndex) An event triggered when leaving the current page. In the function, this refers to the section of the current page, leaveIndex is the index of the page being left, and nowIndex is the Index of the page being loaded. ##afterLoad(afterIndex) An event triggered after the next page has loaded. In the function, this refers to the section of the page being loaded, and afterIndex is the index of the page being loaded.

fullpage.init("#sectionContent", {
  beforeLeave: function (leaveIndex, nowIndex) {
    //如果现在在第1个页面，向下滚动后
    if (nowIndex === 2) {
      //leaveIndex = 1,nowIndex = 2
      console.log("You will leave page 2"); //这条语句会执行
    }
    console.log(this, leaveIndex, nowIndex); //这里的 this 指向将要离开的页面元素，即第一个页面
  },
  afterLoad: function (afterIndex) {
    //afterIndex = 2
    if (afterIndex === 2) {
      console.log("You will go to page 2"); //这条语句会执行
    }
    console.log(this, afterIndex); //此处 this 指向当前载入的页面，即第二个页面
  },
});

Methods#

##init(el,options) Page initialization. el is the outermost wrapper selector, and options are the parameters for customization. See Initialization for details. ##moveTo(index,slideIndex) Scrolls to the specified page. index is a required parameter, and slideIndex is an optional parameter.

fullpage.moveTo(1); //滚动到第一个页面
fullpage.moveTo(3, 2); //滚动到第三个页面的第二个slider

##moveToNext(callback) Vertically scrolls to the next page. callback is an optional callback function.

    fullpage.moveToNext();            //滚动到下一个页面
    fullpage.moveToNext(callback)     //滚动到下一个页面后，执行 callback
    fullpage.moveToNext(callback,params...)   //滚动到下一个页面后，执行 callback,params为callback的参数，根据情况传入
    function foo(a,b){
        console.log(a,b)
    }
    fullpage.moveToNext(foo,1,2)              //滚动到下一个页面，并输出 1，2

moveToPre(callback)#

Vertically scrolls to the previous page. Usage is the same as moveToNext(callback).

slideToNext()#

Horizontally scrolls to the next page (page slides left).

slideToPre()#

Horizontally scrolls to the previous page (page slides right).

TODO#

• Add method to scroll to a specific page
• Add custom events for page load or leave during page scrolling
• Support for horizontal scrolling
• Add mouse wheel control
• Add keyboard control