jquery-Full-screen scrolling plugin fullpage.js Usage Summary
Author GitHub and: Https://github.com/alvarotrigo/fullPage.js
Today, the jquery of a plug-in fullpage.js, you can achieve full-screen scrolling, very popular effect, compatibility ie8+ is good, using the site has millet, and other electronic products, auto full-screen scrolling display, looks relatively tall on the next I comprehensive analysis under this section of the plugin! Attached to me to do a simple effect, just into the blog park, I do not know how to on the demo, only!
Compatibility:
Main functions:
1. Support mouse scrolling;
2. Support forward and backward keyboard control;
3. Multiple callback functions;
4. Support mobile phone. mobile device;
5. Support window scaling automatic adjustment;
6. can set the scrolling width, background color, scrolling speed, looping options, callbacks, text alignment and so on;
7. Support CSS3 animation;
Implementation method:1. Insert Jquery.fullPage.css;
2. Insert Jquery.js;
3. Insert Jquery-ui.js; (for animation)
4. Insert Jquery.fullpage.js;
1 <Linkrel= "stylesheet"href= "Jquery.fullPage.css">2 <Scriptsrc= "Jquery-1.11.3.min.js"></Script>3 <Scriptsrc= "Jquery-ui.js"></Script>4 <Scriptsrc= "Jquery.fullPage.js"></Script>
Html:
If you want to define a different starting point instead of one or a part of the first slide, simply add the active section and place it before you want to load the slide position.
To extend additional horizontal slides within one slide, each slide defines a div.
1 <Body>2 <DivID= "Fullpage">3 <Divclass= "section S1">4 <imgsrc= "Img/bc8.jpg"alt="">5 </Div>6 <Divclass= "section s2">7 <imgsrc= "Img/bc8.jpg"alt="">8 </Div>9 <Divclass= "section s3">Ten <imgsrc= "Img/bc8.jpg"alt=""> One </Div> A <Divclass= "section S4"> - <imgsrc= "Img/bc8.jpg"alt=""> - </Div> the <Divclass= "section S5"> - <imgsrc= "Img/bc8.jpg"alt=""> - </Div> - </Div> + </Body>Javascript:
1 <Script>2 $(function(){3 $('#fullpage'). fullpage ({4 Navigation:'true'5 });6 });7 </Script>
Configuration table:
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. Method:
| 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, receiving Anchorlink, index, SlideIndex, direction 4 parameters |
jquery-Full-screen scrolling plugin "fullpage.js" API Usage Summary
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
