X-BUILD

X-FULLPAGE

Full-screen scrolling plug-in for mobile, relying on X-TOUCH, it can help you quickly and easily create high-performance mobile full-screen scrolling effects. X-FULLPAGE can only assist you in triggering animations, using css animation libraries (recommended animate.css) or custom animations to achieve page flip animation effects.

Installation

  • Install via npm or yarn:
npm install x-fullpage x-touch animate.css --save

This tutorial uses animate.css as the animation library by default

Quote

X-FULLPAGE depends on X-TOUCH, please make sure X-TOUCH takes precedence init:

// javascript
import XFullpage from 'x-fullpage';
import XTouch from 'x-touch';
import 'animate.css';

const xTouch = new XTouch();
const xFullpage = new XFullpage();

xTouch.init();
xFullpage.init();

This project is packaged in rollup using UMD format, and supports AMD, CommonJS, and script tags. [Download Source] (https://github.com/codexu/x-fullpage/tree/master/dist)

Getting off

  • Create a root node with an id of root.

Use the pug template engine when creating with x-build-cli, this node has been created in index.pug, ** skip this step**.

  • Create multiple class nodes under #root for x-page to represent each page. You can write the contents of the page inside.
<!-- html -->
<div id="root">
  <div class="x-page"></div>
  <div class="x-page"></div>
  <div class="x-page"></div>
</div>

Animation parameters

Animate the element in .x-page :

<!-- html -->
<div class="x-page">
  <div animate="animate-name"
      Delay=1000
      Duration=1000
  ></div>
</div>

animate

empty <String>

Animation name: Refer to animate.css, or customize the animation class name.

delay

1000(ms) <Number>

Delay: Start timing when the page scrolls.

duration

1000(ms) <Number>

Animation duration.

Instance parameters

When instantiating XFullpage, pass in the object configuration parameter:

  new XFullpage({
    // ...
  });

root

'root' <String>

Change this when your root node id doesn't want to use '#root'.

pageClassName

'x-page' <String>

Change this when your page node doesn't want to use .x-page.

loop

false <boolean>

The page turning cycle, after opening, the last page continues to slide back to the first page, and vice versa.

flex

true <boolean>

Flex layout mode, the content will be in the middle of the screen.

duration

1000 <Number>

The duration of the page turning.

indicator

true <boolean>

Indicator switch.

indicatorWidth

'20px' <String>

Indicator dot diameter.

indicatorColor

rbga(255, 255, 255, .3) <color>

The default color of the indicator.

indicatorCurrentColor

rbga(255, 255, 255, .3) <color>

Indicator focus color.

beforeChange(index)

none <Function>

Callback function, triggered when the page starts scrolling.

  • index <Number> page index ( 0 ~ n )

afterChange(index)

none <Function>

Callback function, triggered when the page scroll ends.

  • index <Number> page index ( 0 ~ n )

API

pageTo(index)

index <Number> page index ( 0 ~ n )

By calling pageTo through an instance, you can jump to the specified page:

// Jump to page 3 after two seconds
setTimeout(() => {
  xFullpage.pageTo(2);
}, 2000);

← Load →