Brief introduction
Fullpage.js is a jQuery-based plugin that makes it easy and easy to make full-screen Web sites, with the main features:
- Support Mouse Scrolling
- Support for forward and backward and keyboard control
- Multiple callback functions
- Support phone, tablet touch events
- Support CSS3 Animations
- Support for Window Scaling
- Auto Adjust when window is scaled
- You can set scrolling width, background color, scrolling speed, looping options, callbacks, text alignment, and more
Compatibility jquery Compatible
Compatible with JQuery 1.7+.
Browser compatible
|
|
|
|
|
Ie8+? |
Chrome? |
Firefox? |
Opera? |
Safari? |
Using Method 1, introducing the file
- <link rel= "stylesheet" href="Css/jquery.fullpage.css">
- <script src="Js/jquery.min.js"></script>
- <!--Jquery.easings.min.js is used for easing parameters, you can also use the full jquery UI instead, if you do not need to set the easing parameter, you can remove the change file--
- <script src="Js/jquery.easings.min.js"></script>
- <!--if Scrolloverflow is set to true, you need to introduce jquery.slimscroll.min.js, which is normally not required--
- <script src="Js/jquery.slimscroll.min.js"></script>
- <script src="Js/jquery.fullpage.js"></script>
2. HTML
<div id= "Dowebok" > <div class= "section" >
Each section represents a screen, the default display is "First screen", if you want to specify the screen to display when loading the page, you can add class= "active" in the corresponding section, such as:
<div class= "section active" > Third screen </div>
At the same time, you can add slide to the section, such as:
[XML]View PlainCopy
- <div id="Dowebok">
- <div class="section"> First screen </div>
- <div class="section"> Second screen </div>
- <div class="section">
- <div class="Slide"> The first screen of the third screen </div>
- <div class="Slide"> second screen of the third screen </div>
- <div class="Slide"> Third screen of the third screen </div>
- <div class="Slide"> Third Screen Fourth screen </div>
- </div>
- <div class="section"> Fourth screen </div>
- </div>
3. JavaScript[JS]View PlainCopy
- $ (function () {
- $ (' #dowebok '). Fullpage ();
- });
Configuration 1, Options
Options |
type |
Default Value |
Description |
Verticalcentered |
String |
True |
Whether the content is centered vertically |
Resize |
Boolean value |
False |
Whether the font is scaled as the window zooms |
Slidescolor |
Function |
No |
Set Background color |
Anchors |
Array |
No |
Define Anchor chain Connection |
Scrollingspeed |
Integer |
700 |
Scrolling speed in milliseconds |
Easing |
String |
Easeinquart |
Scrolling animation mode |
Menu |
Boolean value |
False |
The menu can control scrolling after the set of related properties corresponds to the value of the anchors. |
Navigation |
Boolean value |
False |
Whether to show project navigation |
Navigationposition |
String |
Right |
Location of the project Navigator, optional left or right |
Navigationcolor |
String |
#000 |
Color of Project Navigation |
Navigationtooltips |
Array |
Empty |
Tip for Project Navigation |
Slidesnavigation |
Boolean value |
False |
Whether to display item navigation for left and right sliders |
Slidesnavposition |
String |
Bottom |
Position of the left and right slider item navigation, optional top or bottom |
Controlarrowcolor |
String |
#fff |
The background color of the arrows on the left and right sliders |
Loopbottom |
Boolean value |
False |
Roll back to top after scrolling to the bottom |
Looptop |
Boolean value |
False |
Roll bottom after scroll to top |
Loophorizontal |
Boolean value |
True |
Whether the left and right sliders are circular sliding |
Autoscrolling |
Boolean value |
True |
Whether to use the plug-in scrolling mode, if you choose False, the browser's own scroll bar will appear |
Scrolloverflow |
Boolean value |
False |
Whether the scroll bar is displayed after the content is over full screen |
Css3 |
Boolean value |
False |
Whether to use CSS3 transforms scrolling |
Paddingtop |
String |
0 |
The distance from the top |
Paddingbottom |
String |
0 |
Distance to bottom |
Fixedelements |
String |
No |
|
Normalscrollelements |
|
No |
|
Keyboardscrolling |
Boolean value |
True |
Whether to use keyboard arrow keys to navigate |
Touchsensitivity |
Integer |
5 |
|
Continuousvertical |
Boolean value |
False |
Cyclic scrolling, incompatible with looptop and Loopbottom |
Animateanchor |
Boolean value |
True |
|
Normalscrollelementtouchthreshold |
Integer |
5 |
|
2. Methods
name |
Description |
Movesectionup () |
Scroll up |
Movesectiondown () |
Scroll down |
MoveTo (section, slide) |
Scroll to |
Moveslideright () |
Slide Scroll Right |
Moveslideleft () |
Slide Scroll Left |
Setautoscrolling () |
Set page scrolling mode, set to True when auto scroll |
Setallowscrolling () |
Add or remove mouse wheel/trackpad controls |
Setkeyboardscrolling () |
Add or remove keyboard direction key controls |
Setscrollingspeed () |
Defines the scrolling speed in milliseconds |
3. Callback function
name |
Description |
Afterload |
Scroll to a screen after the callback function, receive Anchorlink and index two parameters, Anchorlink is the name of the anchor chain, index is the ordinal, starting from 1 to calculate |
Onleave |
The callback function before scrolling, receives index, Nextindex and direction 3 parameters: Index is the number of "page" to leave, the calculation starts from 1; Nextindex is the serial number of the "page" that is scrolled to, starting from 1; direction determines whether to scroll up or down, and the value is up or down. |
AfterRender |
callback function after page structure is generated, or callback function after page initialization is completed |
Afterslideload |
callback function after scrolling to a smooth block of water, similar to Afterload, receiving Anchorlink, index, SlideIndex, direction 4 parameters |
Onslideleave |
A callback function before the rolling of a water smoothing block, similar to Onleave, receives Anchorlink, index, SlideIndex, Directio |
jquery Full-screen scrolling plugin fullpage.js