fullPage.js is a jQuery-based plug-in that can easily, very easily create a full-screen website. Today, we often see a full-screen web site, especially foreign websites. These sites do with the pieces of a big picture or background color, add some simple content, it is particularly high-end atmosphere on the grade. If you want your website can be designed to full-screen, appear to be more on the grade, you can try fullPage.js.
FullPage.js main functions are: support for mouse scroll forward and back support and keyboard control, multiple callback functions, support for mobile phones, flat-panel touch events, support CSS3 animations, support window scaling, automatic adjustment window scaling, you can set the width of the scroll, background color, scrolling speed, cycle option, callback, text alignment and so on.
full page 2.7.8
Instructions for use
1, the introduction of plug-in files
This plugin relies on jQuery, so you also need to download jQuery, and introduced before Fullpage plug.
<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" /> <script src="/fullpage/jquery.min.js"></script> <script type="text/javascript" src="/fullpage/jquery.fullPage.js"></script>
If you need to customize the page scrolling effect, you need to introduce jquery.easings.min.js file.
<script src="/fullpage/jquery.easings.min.js"></script>
For more content pages, you can set the scroll bar on the right, but by default does not scroll, you need jquery.slimscroll.min.js file to customize the slider scrolling effect.
<script type="text/javascript" src="/fullpage/jquery.slimscroll.min.js"></script>
Finally, if you do not want to download the project, you can use the open source project CDN services, Fullpage address in CDNJS of: https: //cdnjs.com/libraries/fullPage.js
2, write HTML code
By default, the code for each screen needs to have a DIV wrap, and set the DIV class name section, by default, the first setion as shown on the Home page.
<div id="fullpage'"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>
If you need to make a certain section of the home page as the first screen display, you just have to give this section to add an active class, Fullpage priority will automatically display the screen, for example, define the following code:
<div class="section active">Some section</div>
Fullpage comes sliding around slides, only need to add elements in section DIV, and to add a slide type DIV element, FUllpage automatically generated slide effects such as the following code:
<div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div>
3, initialization Fullpage
After using jQuery to perform the function of the document is loaded, initialization Fullpage plug.
$(document).ready(function() {
$ ( '# Full page'). Full page ();
});
All options set more complex initialization might look like this:
$(document).ready(function() {
$ ( '# Full page'). Full page ({
//Navigation
menu: false, the anchors and the corresponding values of the relevant properties // binding menu, setting, can control the scrolling menu, the default is false.
anchors: [ 'firstPage', 'secondPage'], // anchors defined anchor links, default []
lockAnchors: false, // whether to lock anchor links, default is false, set to true will not change after the link address
navigation: false, // whether to display the navigation, the default is false
navigationPosition: 'right', // location of the navigation of small dots
navigationTooltips: [ 'firstSlide', 'secondSlide'], // dot navigation tips
showActiveTooltip: false, // whether to display tooltip information about the current page
slidesNavigation: true, // whether to display the navigation lateral slide, the default is false
slidesNavPosition: 'bottom', // the lateral position of the navigation, the default is bottom, top, or bottom may be provided
//Scrolling
css3: true, // whether to use CSS3 transforms to achieve the rolling effect, the default is true
scrollingSpeed: 700, // set the scroll speed, in milliseconds, default 700
autoScrolling: true, // whether to use a rolling plug-in, the default is true, false if the browser comes with a scroll bar appears
fitToSection: true, // set whether the adaptive spatial entire window, default values: true
scrollBar: false, // whether to include a scroll bar, the default is false, if the scroll bar comes to true browser appears
easing: 'easeInOutCubic', // custom page section rolling animation, if this modification should be introduced jquery.easing plug
easingcss3: 'ease', // custom page section rolling transition effects, if modifications need to introduce this third-party plug
loopBottom: false, // whether to scroll to scroll to the top after consecutive lowest part, the default is false
loopTop: false, // scroll to the top of the continuous rolling if in the end the most part, the default is false
loopHorizontal: true, // whether to slide laterally slide rolling cycle, the default is true
continuousVertical: false, // whether rolling cycle, incompatible loopTop and loopBottom options
normalScrollElements: '# element1, .element2', // avoid automatic scrolling, scrolling when some elements, such as Baidu map
scrollOverflow: false, // whether to display the contents of the scroll bar after more than full screen, true scroll bar is displayed, scroll through the contents For further need to meet jquery.slimscroll plug
touchSensitivity: 15, // sliding sensitivity page in a mobile device, the default is 5 up to 100, the more difficult the larger slide
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true, // whether you can use the keyboard arrow keys to navigate, the default is true
animateAnchor: true, // anchor links if you can control the scrolling animation, the default is true, if it is false to locate the failed anchor link
recordHistory: true, // whether the historical record, the default is true, the browser can navigate forward and back. If autoScrolling: false, then this property will be closed
//Design
controlArrows: true, // define whether the slide is controlled by the arrow, default true
verticalCentered: true, // define whether the content of each page vertically centered, default true
resize: false, // font is scaled with the window zoom, default false
sectionsColor: [ '#ccc', '#fff'], // set the background-color attribute for each section
paddingTop: '3em', the top section of each padding is provided, the default is 0
paddingBottom: '10px', provided at the bottom of each padding section, the default is 0
fixedElements: '#header, .footer', fixing elements, the default is null, jquery you need to configure a selector, when the page scrolling, the scroll elements are not provided fixElements
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section', // section selector. The default is .section
slideSelector: '.slide', // slide selector, by default. Slide
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});
Parameter Description
menu
Default value: false, a selector can be used to specify the interaction with the rolling navigation menu, somewhat similar to the rolling of listening Bootstrap. So when scroll to a section, the corresponding menu will be automatically added active class.
Note that this option does not automatically generate a navigation menu, only the specified menu to the current menu item to add an active activity class.
In order for a custom navigation menu screens and interactive section, you need to add custom properties to a menu of HTML5 (data-menuanchor), and require the same set of anchor text content, for example, the following sample code:
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
$ ( '# Full page'). Full page ({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
Note: Note that the custom menu code should be placed outside the content plug-in settings, because the layout to avoid incompatibilities can use css3: true, otherwise it will be attached to the body of the plug-in itself.
anchors
Default: [], the anchor text for definition of navigation information such as (,), separated by commas before (#example), each navigation text, URL anchor text is also used to quickly navigate this text, the browser through this anchor text links you can support the forward and back buttons function.
This option may also be provided as user's bookmarks, when the user opens a URL with the anchor text, Fullpage can automatically jump to the corresponding section of the screen or a slide position of the slide.
Note that if you use this option, then the page can not have the same ID, a plug-in to Fullpage not accurately locate the section of the screen or slide slide position, and secondly, it is also contrary to the pages written in CSS specification.
lockAnchors
Default value: false, determining whether the anchor in the URL of the plug-in will have any effect. You can still use their own internal anchor and a callback function, but they will not have any effect, rolling in the site. If you want to use anchor fullpage.js other plug-ins in the URL.
Note that this setting can help understand the correspondence between the anchors option in the sidebar menu, the value of the element classes. .Section through which the marked position.
navigation
Default value: false, if set to true, then he will show quick navigation bar consisting of a small circle.
navigationPosition
Default values: none, used in combination with navigation parameters, sets the position defined navigation menu display can be set to left / right.
navigationTooltips
Default: [], defined when the navigation is set to true when the mouse is moved to the fast navigation prompt text above, each intermediate properties (,) separated by commas in English.
showActiveTooltip
Default value: false, setting whether to automatically display the tooltip text navigationTooltips set.
slidesNavigation
Default value: false, use the same navigation, but this parameter is set navigation display different locations, and this is set by the user slides.
slidesNavPosition
Default: bottom, provided in a position defined slidesNavigation navigation menu is displayed, is provided optional top / bottom, you may want to modify the CSS styles from top or bottom, and any other styles such as color.
css3
Default values: true, determining whether to use JavaScript and CSS3 conversion to scroll through the slices and slide. Speed up the tablet and mobile device's browser supports CSS3 of exercise is good. If this option is set to true, the browser does not support CSS3, jQuery callback function will be replaced.
scrollingSpeed
Default: 700, each screen scrolling animation time execution unit time in milliseconds (ms).
autoscrolling
Default value: true, if the definition screen automatically scrolls, or require the user to scroll through the trigger event, it also affects the part suitable for tablets and mobile browser / device window.
fitToSection
Default values: true, set whether adaptive spatial entire window to the contents of a section of the dividing line, when set to true, the section will be filled to an entire page, whether those users can stay anywhere on the page.
scrollBar
Default value: false, define whether to use the default browser scroll bar, if you use the default browser scroll bar, autoScrolling configure any course to take effect, the user can scroll a free website with scroll bars and fullpage.js the appropriate portion of the screen when completed scroll.
easing
Default: easeInOutCubic, defines the transition effect for the vertical and horizontal scrolling, it requires document vendors / jquery.easings.min.js or jQuery UI widget, specific animation effect you can refer easings plug presentations, you can also use other animation plug-in library.
easingcss3
Default value: ease, definitions are used to scroll the screen css3: excessive true effect settings, you can use CSS3 transition-timing-function property to customize more animation effects, such as: linear, ease-out, ......, or use cubic create a custom animation -bezier method, you may want to use this to create Matthew Lein CSS Easing animation Tool.
loopBottom
Default value: false, define the screen to scroll to the last post, if the loop scroll to the first.
loopTop
Default value: false, custom screen scroll to the first post, whether sequentially scroll to the last.
loopHorizontal
Default value: true, if the definition of the level of circulating slide switch.
continuousVertical
Default values: false, scroll down to define whether the last one should be rolled down to the first, the first portion if the scroll direction should be scrolled to the last. Incompatible loopTop and loopBottom options.
normalScrollElements
Default value: null, if you want to avoid automatic scrolling, when some elements of the scroll, which you need to use the option. (Useful map, scrolling div, etc.) need jQuery selector string for these elements. For example: normalScrollElements: '# element1, .element2'.
scrollOverflow
Default value: false, set when the content exceeds the height of the screen time, whether or not cut extra content.
- When set to true, your content will be automatically cut, it can be considered when afterRender callback function calls, handle your content or how much extra content appropriate treatment to use other plug-in library.
- When set to false, the plugin will not automatically cut the extra content, but the content of the rest did not show any course can not be displayed at this time, you can use plug-ins to customize jquery.slimscroll.min scroll event, if you want to use this plugin should be introduced before Fullpage plug, for example, the following code:
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script> <script type="text/javascript" src="jquery.fullPage.js"></script>
touchSensitivity
Default: 5, defines the percentage of the width / height of the browser window, the sliding touch may be far jump to the next section / slide.
normalScrollElementTouchThreshold
Default: 5, defines a digital test HTML tag tree institutions, whether in support for touch events on mobile devices.
keyboardScrolling
Default value: true, if the definition can scroll section is controlled by the keyboard arrows events.
animateAnchor
Default values: true, define the URL of the page when there is anchor text, whether to help users locate the corresponding section or slide.
recordHistory
Default value: true, if the definition of the web page scrolling record of state to the browser's history.
- When set to true, each section / slide rolling state record to the browser's history, such a setting conducive to users to easily roll back to what was just browsing.
- When set to false, the user's browsing path is not recorded in the history of the browser, if you want to cancel this option can be used autoScrolling: false.
controlArrows
Default values: true, decide whether to use the control arrows left or right to move the slide.
verticalCentered
Default values: true, decide later whether to initialize, the content is centered vertically on the page, if you want to customize the position of the element, then you can set to false, calling afterrender callback function to load another script library settings you page after plug-in initialization content.
resize
Default values: true, whether the window size changes, automatically adjust the page size of the font.
sectionsColor
Default values: none, background defining each section of the CSS presentation, for example, the following code:
$ ( '# Full page'). Full page ({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
If the asymmetry parameter settings, such as the number of extra color screen number set, then the extra screen is not the default background color, if the number is less than the number of screen color settings, then the extra color will not be displayed.
paddingTop
Default: 0, the definition of each head section fixed blank, such as setting paddingTop: '10px', paddingTop: '10em', ......, it is useful in the case where the fixed header.
paddingBottom
Default: 0, define each section of the bottom blank is fixed, for example, provided paddingBottom: '10px', paddingBottom: '10em', ......, is useful in the case where the fixed bottom of the navigation.
fixedElements
Default value: null, whether the definition of an element in a fixed position on the page, the element is turned off plug-in is necessary, use the scroll CSS3 option to maintain a fixed structure. It requires a string of jQuery selectors these elements. For example: fixedElements: '# element1, .element2'.
responsiveWidth
默认值：0， A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s width is less than 900 the plugin will scroll like a normal site.
responsiveHeight
默认值：0， A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s height is less than 900 the plugin will scroll like a normal site.
sectionSelector
Default value: .section, the definition is used to select the full screen scrolling content jQuery selector. It may need to change, sometimes with other plug-ins in order to avoid the same problems as the full-page selector.
slideSelector
Default value: .slide, the definition for the plug slides jQuery selector. It may need to change, sometimes with other plug-ins in order to avoid using the same selector fullpage.js problem.
onLeave (index, nextIndex, direction)
Before rolling a callback function receives the index, nextIndex and direction 3 parameters
- The index is the "page" of the number of departure is calculated from a start;
- nextIndex rolling into "pages" of the number, calculated from the beginning 1;
- direction scroll up or scroll down judgment, values are up or down.
$ ( '# Full page'). Full page ({
onLeave: function(index, nextIndex, direction){
var leavingSection = $(this);
//after leaving section 2
if(index == 2 && direction =='down'){
alert("Going to section 3!");
}
else if(index == 2 && direction == 'up'){
alert("Going to section 1!");
}
}
});
Cancellation of the rolling section
You can return false onLeave callback function, it will cancel the scroll.
$ ( '# Full page'). Full page ({
onLeave: function(index, nextIndex, direction){
//it won't scroll if the destination is the 3rd section
if(nextIndex == 3){
return false;
}
}
});
afterLoad (anchorLink, index)
Scroll to the callback function after a screen, and the index is received anchorLink two parameters.
- anchorLink is the name of the anchor link
- section index is the index, calculated from the start 1
In the absence of set anchor text, only use a unique index parameter.
$ ( '# Full page'). Full page ({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
//using index
if(index == 3){
alert("Section 3 ended loading");
}
//using anchorLink
if(anchorLink == 'secondSlide'){
alert("Section 2 ended loading");
}
}
});
after render ()
This callback function is only called when generating a page structure. This is used to initialize or delete any other plug-ins required documents ready callback code (DOM created this plugin to modify the structure obtained).
$ ( '# Full page'). Full page ({
afterRender: function(){
var pluginContainer = $(this);
alert("The resulting DOM structure is ready");
}
});
afterResize()
This callback function is called when the window size changes happen, just some adjustments.
$ ( '# Full page'). Full page ({
afterResize: function(){
var pluginContainer = $(this);
alert("The sections have finished resizing");
}
});
afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)
Scroll to the callback function after a horizontal slider, and is similar to afterLoad receiving anchorLink, index, slideIndex, direction 4 parameters.
- anchorLink: anchorLink corresponding to the section.
- index: index of the section. Starting from 1.
- slideAnchor: anchor corresponding to the slide (in case there is)
- slideIndex: index of the slide. Starting from 1. (the default slide doesn’t count as slide, but as a section)
In the absence of anchorlinks slide or slide SlideIndex parameter is the only use of a definition.
$ ( '# Full page'). Full page ({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
var loadedSlide = $(this);
//first slide of the second section
if(anchorLink == 'secondPage' && slideIndex == 1){
alert("First slide loaded");
}
//second slide of the second section (supposing #secondSlide is the
//anchor for the second slide
if(index == 2 && slideIndex == 'secondSlide'){
alert("Second slide loaded");
}
}
});
onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)
A certain level before the slider of the scroll callback function, with similar onLeave receiving anchorLink, index, slideIndex, direction 4 parameters.
- anchorLink: anchorLink corresponding to the section.
- index: index of the section. Starting from 1.
- slideIndex: index of the slide. Starting from 0.
- direction: takes the values right or left depending on the scrolling direction.
- nextSlideIndex: index of the destination slide. Starting from 0.
$ ( '# Full page'). Full page ({
onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
var leavingSlide = $(this);
//leaving the first slide of the 2nd Section to the right
if(index == 2 && slideIndex == 0 && direction == 'right'){
alert("Leaving the fist slide!!");
}
//leaving the 3rd slide of the 2nd Section to the left
if(index == 2 && slideIndex == 2 && direction == 'left'){
alert("Going to slide 2! ");
}
}
});
Cancellation slide slide
You can set onSlideLeave callback function returns false, then he will stop the sliding events, like onLeave same.
Fullpage method functions
$ .Fn.fullpage.moveSectionUp (); // scroll up one page $ .Fn.fullpage.moveSectionDown (); // scroll down one page $ .Fn.fullpage.moveTo (section, slide); // start at 1, slide from 0 $ .Fn.fullpage.silentMoveTo (section, slide); // and moveTo the same, but no scroll effect $ .Fn.fullpage.moveSlideRight (); // slide scroll right $ .Fn.fullpage.moveSlideLeft (); // slide Scroll left $ .Fn.fullpage.setAutoScrolling (boolean); // set dynamically autoScrolling $ .Fn.fullpage.setLockAnchors (boolean); // set dynamically lockAnchors $ .Fn.fullpage.setRecordHistory (boolean); // set dynamically recordHistory $ .Fn.fullpage.setScrollingSpeed (milliseconds); // set dynamically scrollingSpeed $ .Fn.fullpage.destory (type); // destroy fullpage, type can not write or use all $ .Fn.fullpage.reBuild (); / newly updated and page size, page for requesting a change of the ajax remodeling effects
moveSectionUp ()
Scroll up setting section
$ .Fn.fullpage.moveSectionUp ();
moveSectionDown ()
Scroll down the settings section
$ .Fn.fullpage.moveSectionDown ();
moveTo(section, slide)
A section setting screen to scroll or slide, two index values are parameters of a content block or anchor text, the case where the slide default index is set to 0.
/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.moveTo('firstSlide', 2);
//Scrolling to the 3rd section in the site
$ .Fn.fullpage.moveTo (3, 0);
//Which is the same as
$ .Fn.fullpage.moveTo (3);
silentMoveTo(section, slide)
This usage and MoveTo function exactly the same way, except MoveTo animation effects when switching, but no animation silentMoveTo method when switching the jump directly to the corresponding section of the.
/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */ $ .Fn.fullpage.silentMoveTo ( 'first suffer', 2);
moveSlideRight()
Set slide to slide to the right, the next slide shows the current screen.
$ .Fn.fullpage.moveSlideRight ();
moveSlideLeft()
Set slide to slide to the left, it will be displayed on a slide in the current screen.
$ .Fn.fullpage.moveSlideLeft ();
setAutoScrolling(boolean)
Real-time control page scrolling mode, the optional parameter false / true.
- If the parameter is set to true, all of the section will scroll automatically.
- If the parameter is set to false, all of the section will not scroll automatically, it requires users to manually or use the slider bar of the browser to scroll the page.
Note that, scrollOverflow, if set to true, it may be difficult to roll the mouse wheel or touchpad when the scroll portion.
$ .Fn.fullpage.setAutoScrolling (false);
setFitToSection(boolean)
This function sets the option fitToSection determine whether adaptive section on the screen.
$.fn.fullpage.setFitToSection(false);
setLockAnchors(boolean)
Setting options lockAnchors determine the anchor text is locked to the URL.
$.fn.fullpage.setLockAnchors(false);
setAllowScrolling(boolean, [directions])
Add or disable the mouse wheel and move the touch event Fullpage automatic binding, but any user can then switch section / slide by clicking the keyboard and fast way to navigate. To cancel keyboard events you should use setKeyboardScrolling method.
- Directions, optional parameter value may be set to: all, up, down, left, right, or a combination of setting parameters, for example on down, right, he set up two directions scrolling is prohibited or activation.
//disabling scrolling $ .Fn.fullpage.setAllowScrolling (false); //disabling scrolling down $.fn.fullpage.setAllowScrolling(false, 'down'); //disabling scrolling down and right $.fn.fullpage.setAllowScrolling(false, 'down, right');
setKeyboardScrolling(boolean, [directions])
Add or disable keyboard control over the section / slide, and this event is the default binding.
- Directions, optional parameter value may be set to: all, up, down, left, right, or a combination of setting parameters, for example on down, right, he sets the two directions is prohibited or activate the keypad scroll.
//disabling all keyboard scrolling $.fn.fullpage.setKeyboardScrolling(false); //disabling keyboard scrolling down $.fn.fullpage.setKeyboardScrolling(false, 'down'); //disabling keyboard scrolling down and right $.fn.fullpage.setKeyboardScrolling(false, 'down, right');
setRecordHistory(boolean)
Defines whether the browser history in the change log for each URL.
$ .Fn.fullpage.setRecordHistory (false);
setScrollingSpeed(milliseconds)
The definition of each section / slide rolling time, a default time in milliseconds (ms).
$.fn.fullpage.setScrollingSpeed(700);
destroy(type)
Fullpage remove events and add HTML / CSS style style, ideal for use with Ajax loaded content.
- type: can be set to a null character, or all, if once executed, HTML / CSS styles and codes are added by Fullpage will be removed, will show no use Fullpage style, a modified using any plug-ins.
//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();
//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');
reBuild()
DOM structure updated to accommodate the new window size or content. Ideal for use in combination with Ajax call DOM or change the structure of external sites.
$.fn.fullpage.reBuild();
Resource loading delay
fullpage.js provides a lazy loading images, video and audio elements, so they will not slow down your site waste data transmission load or unnecessary. When using lazy loading into the viewport when all of these elements will be loaded. Enable lazy loading, all you need to do is to change your src attribute data-src as shown below:
<img data-src="image.png"> <video> <source data-src="video.webm" type="video/webm" /> <source data-src="video.mp4" type="video/mp4" /> </ video>
Note: Only for Save review, the original article page, http://fullpage.81hu.com/