fullpage.js specific usage

1.fullpage.js download address

https://github.com/alvarotrigo/fullPage.js

2.fullPage.js is a jQuery-based plug-in, it can easily and easily create a full-screen website, the main functions are:

Support mouse scroll
Support forward, backward and keyboard control
Multiple callback functions
Support mobile phone, tablet touch events
Supports CSS3 animations
Support window zoom
Automatically adjust when window is zoomed
Configurable scroll width, background color, scroll speed, loop options, callbacks, text alignment, and more

3. Introduce the following file into the corresponding HTML page

<link rel="stylesheet" href="css/jquery.fullPage.css">

<script src="js/jquery.min.js"></script>
 
<!-- jquery.easings.min.js is required for the easing parameters, you can also use the full jQuery UI instead --> 
< script src ="js/jquery.easings.min.js" ></ script >
 
<!-- If scrollOverflow is set to true, jquery.slimscroll.min.js needs to be introduced, in general no need --> 
< script src ="js/jquery.slimscroll.min.js" ></ script >
 
<script src="js/jquery.fullPage.js"></script>

4. <body> section

/*Add navigation clickable*/
 < ul id ="menu" > 
    < li data-menuanchor ="page1" class ="active" > 
        < a href ="#page1" > First screen </ a > 
    </ li > 
    < li data-menuanchor = "page2" > 
        < a href = "#page2" > Second screen </ a > 
    </ li > 
    < li data-menuanchor = "page3">
        <a href="#page3">第三屏</a>
    </li>
    <li data-menuanchor="page4">
        <a href="#page4">第四屏</a>
    </li>
</ul>
/*Mouse scroll change/*
< div id = "dowebok" > 
    < div class = "section" > 
        < h3 > First screen </ h3 > 
        < p > fullPage.js - Binding menu demo </ p > 
    </ div > 
    < div class =" section active" > 
        < h3 > Second screen </ h3 > 
        < p > Please check the upper left corner, click to control </ p > 
    </ div > 
    <div class="section"> 
        < h3 > The third screen </ h3 > 
        < p > The bound menu does not have a default style, you need to write your own </ p > 
    </ div > 
    < div class ="section" > 
        < h3 > The fourth screen < / h3 > 
        < p > This is the last screen </ p > 
    </ div > 
</ div >

5.js part

<script>
$(function(){
    $( ' #dowebok ' ).fullpage({
     sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], 
    // Set color parameters 
    anchors: [ ' page1 ' , ' page2 ' , ' page3 ' , ' page4 ' ],
     // Define the anchor link 
    menu: ' #menu ' 
    // Bind the menu, after setting the relevant properties corresponding to the value of anchors, the menu can control the scrolling 
    });
});
</script>

6. Configuration

Options

Options	Types of	Defaults	illustrate
verticalCentered	string	true	Whether the content is vertically centered
resize	Boolean value	false	Whether the font scales as the window scales
slidesColor	function	without	set background color
anchors	array	without	define anchor links
scrollingSpeed	integer	700	scroll speed in milliseconds
easing	string	easeInQuart	scroll animation
menu	Boolean value	false	Binding the menu, after setting the relevant properties corresponding to the value of anchors, the menu can control the scrolling
navigation	Boolean value	false	Whether to show project navigation
navigationPosition	string	right	The position of the item navigation, optional left or right
navigationColor	string	#000	Project Navigation Color
navigationTooltips	array	null	project navigation tips
slidesNavigation	Boolean value	false	Whether to show item navigation for left and right sliders
slidesNavPosition	string	bottom	The position of the item navigation of the left and right sliders, optional top or bottom
controlArrowColor	string	#fff	The background color of the arrows of the left and right sliders
walkBottom	Boolean value	false	Whether to scroll back to the top after scrolling to the bottom
loopTop	Boolean value	false	Whether to scroll to the bottom after scrolling to the top
loopHorizontal	Boolean value	true	Whether the left and right sliders slide circularly
autoScrolling	Boolean value	true	Whether to use the plugin's scrolling method, if false is selected, the browser's own scroll bar will appear
scrollOverflow	Boolean value	false	Whether to display the scroll bar when the content exceeds the full screen
css3	Boolean value	false	Whether to scroll with CSS3 transforms
paddingTop	string	0	distance from top
paddingBottom	string	0	distance from bottom
fixedElements	string	without
normalScrollElements		without
keyboardScrolling	Boolean value	true	Whether to use the keyboard arrow keys to navigate
touchSensitivity	integer	5
continuousVertical	Boolean value	false	Whether to loop scroll, not compatible with loopTop and loopBottom
Anchor	Boolean value	true
normalScrollElementTouchThreshold	integer	5

method

name	illustrate
moveSectionUp ()	scroll up
moveSectionDown ()	scroll down
moveTo(section, slide)	scroll to
moveSlideRight()	slide scroll right
moveSlideLeft()	slide scroll left
setAutoScrolling()	设置页面滚动方式，设置为 true 时自动滚动
setAllowScrolling()	添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()	添加或删除键盘方向键控制
setScrollingSpeed()	定义以毫秒为单位的滚动速度

回调函数

名称	说明
afterLoad	滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
onLeave	滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算； nextIndex 是滚动到的“页面”的序号，从1开始计算； direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender	页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad	滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave	某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

fullpage.js specific usage

Options

method

回调函数

Guess you like