Fullpage.js Full-screen scrolling plugin API

Api

2. sectionscolor:[' green ', ' orange ', ' red ', ' lime ';
   Set Background color
   You can set the Background-color property for each section

4. Controlarrows:
   Defines whether the slide slide is controlled by arrows, the default is true, when we set to false, the arrows around the slide disappear, and on the move we can slide to control the slide

6. Verticalcentered:
   Whether the contents of each page are centered vertically, and the default is True

8. Resize
   Whether the font is scaled as the window is scaled, false by default

10. Scrollingspeed:
    Scrolling speed, in milliseconds, defaults to 700

12. Anchors:
    Defines the anchor connection, the default value is []. With the anchor chain, the user can quickly open and navigate to a page.
    Note When defining the anchor connection, the value should not be the same as any ID or name in the page, especially under IE, and no need to add # when defining

14. Lockanchors:
    If the anchor connection is locked, the default is False, if set to true, the defined anchor chain connection will have no effect, use less

16. Easing:
    Defines how the page section scrolls, by default, Easeinoutcubic, or, if modified, the introduction of the Jquery.easings plugin, or the jquery UI.

18. CSS3:
    Whether to use CSS3 transforms to implement the scrolling effect, which is true by default. You can increase the speed of browsers that support CSS3, such as mobile devices, and if your browser does not support CSS3, you will use jquery instead of CSS3 to implement the scrolling effect. (The legendary graceful downgrade)

20. Looptop:
    Scroll to the top to scroll to the bottom, default false

22. Loopbottom:
    Scroll back to the top after scrolling to the bottom, default false

24. Loophorizontal:
    Landscape Slide slide scrolling, default True

26. Autoscrolling:
    Whether to use the plug-in scrolling mode, by default, True, the browser's own scroll bar will appear, will not scroll by the page, but follow the scroll bar's default behavior to scroll

28. ScrollBar:
    Contains scroll bars, which defaults to false. Set to True to show the browser's own scroll bar, scroll the page or scroll by page, but the default behavior of the scroll bar is also valid

30. Paddingtop/paddingbottom:
    Set the padding at the top and bottom of each section, which is 0 by default. If you need to set a menu, navigation, element, etc. that are fixed at the top or bottom, you can use these two configuration items.

32. Fixedelements:
    Fixed element, default is NULL, you need to configure a jquery selector. When the page scrolls, the elements set by the fixedelements are fixed.

34. Keyboardscrolling:
    Whether you can use keyboard arrow keys to navigate, which is true by default.

36. Touchsensitivity:
    The sensitivity of sliding pages in a mobile device, which defaults to 5, is measured as a percentage, up to 100, and the larger the slide the harder

38. Continuousvertical:
    Whether to cycle scrolling, the default is False. If true, the page will cycle through, and it will not bounce like Looptop and Loopbottom.
    (It is incompatible with looptop, Loopbottom, do not set at the same time)

40. Animateanchor:
    Whether the anchor can control the scrolling animation, the default is true. If False, anchoring to a page by anchor is no longer animated.

42. RecordHistory:
    Whether history is recorded, by default true. You can record the history of page scrolling and navigate through the browser's forward and backward.

    If Autoscrolling:false is set, the configuration will also be closed.

22. Menu
    The menu can control scrolling and defaults to False when the associated property is set to match the value of anchors. A jquery selector that can be set as a menu.

23. Navigation
    Whether navigation is displayed, false by default. If true, small dots are displayed as navigation

24. Navigationposition:
    Navigate the location of the small dots, which can be set to left or right.

25. Navigationtooltips:
    Navigate to the ToolTips setting of the DOT, which defaults to [], and note that it is set in order.

26. Showactivetooltip:
    Whether to display the ToolTip information for the navigation of the current page, false by default

27. Slidesnavigation:
    Whether to show navigation for landscape slides, false by default

28. Slidesnavposition:
    The location of the horizontal slide navigation, default to bottom, can be set to top or bottom

29. Scrolloverflow:
    If the content exceeds the full screen, the scroll bar is displayed, and the default is False. If set to True, scroll bars are displayed and if you want to scroll through the content, you also need to jquery.slimscroll the plug-in mates. The Slimscroll plugin is primarily used to simulate traditional browser scroll bars.

30. Sectionselector:
    The selector for section, which defaults to. Section.

31. Slideselector:
    The slide selector, which defaults to. Slide.

Method

• Movesectionup ():
  Scrolls up one page.

• Movesectiondown ():
  Scroll down one page.

• MoveTo (section,slide):
  Scroll to the first few pages, the first few slides, note: The page is starting from 1, and the slide is starting from 0.

• Silentmoveto (section,slide):
  Scrolls to the first page, like MoveTo, but without animation effects.

• Moveslideright ():
  The slide scrolls right.

• Moveslideleft ():
  Slides scroll left.

• Setautoscrolling (Boolean): Dynamic Settings autoscrolling

• Setlockanchors (Boolean): Dynamic Settings lockanchors

• Setrecordhistory (Boolean): Dynamic Settings RecordHistory

• Setscrollingspeed (milliseconds): Dynamic settings Scrollingspeed

• Setallowscrolling (Boolean,[directions]):
  Add or remove the mouse wheel/slide control, the first parameter true is enabled, FALSE is disabled, the following parameter is the direction, the value contains: All,up,down,left,right, you can use multiple, comma-delimited.

• Destroy (Type):
  Destroy fullpage effects, type can not write, or use all, do not write type,fullpage to the page to add the style and HTML elements are still in, if you use all, the style, HTML and so on all destroyed, page recovery and do not use fullpage the same effect.

• ReBuild ():
  Re-update the page and dimensions to recreate the effect after the page structure is changed after the AJAX request.

Lazy Loading

• Image:

    <img data-src="image.png">

• Video:

    <video>        <source data-src="video.webm" type="video/webm"/>        <source data-src="video.mp4" type="video/mp4"/> </video> 用data-src代替src就可以实现延迟加载图片。

callback function

• Afterload (Anchorlink,index)
  Scroll to a section, and after scrolling, this callback function is triggered once, the function receives Anchorlink and index two parameters, Anchorlink is the name of the anchor chain, index is the ordinal number, starting from 1 to calculate.

  We can trigger the corresponding event according to the Anchorlink and index parameter values.

• Onleave (index,nextindex,direction)
  When we leave a section, this callback function is triggered once, receiving 3 parameters of Index, Nextindex, and direction:

  index是离开的“页面”的序号，从1开始计算；nextIndex是滚动到的目标“页面”的序号，从1开始计算；direction判断往上滚动还是往下滚动，值是 up 或 down。

  by return false; you can cancel scrolling

• AfterRender ()
  callback function after page structure is generated, or callback function after page initialization is completed

• Afterresize ()
  The callback function after the browser window size adaptation

• Afterslideload (Anchorlink,index,slideanchor,slideindex)
  A callback function that scrolls after a slide is similar to afterload.

• Onslideleave (Anchorlink,index,slideindex,direction,nextslideindex)
  When we leave a slide, this callback function is triggered once, similar to Onleave.

Fullpage.js Full-screen scrolling plugin API