Source: https://www.imooc.com/article/10367?block_id=tuijian_wzAbout
fullpage
Fullpage.js is a plug-in based on jquery. It can make a full-screen website very conveniently and easily:
1. Support mouse scrolling
2. Multiple callback functions
3. Support touch events such as mobile phones and tablets
4. Support css3 animation
5. Support window zoom
6. Automatic adjustment when window zoom
7. You can set scroll width, background color, scroll speed, loop options, callbacks, text alignment, etc.
The fullpage homepage on Git.hub:
https://github.com/alvarotrigo/fullPage.js
How to start:
Need to introduce any version above jquery 1.6
Introduce fullpage:
Basic page structure:
Activate the fullpage effect:
Configuration items of Fullpage:
1.sectionsColor:
you can set the background-color attribute for each section
['red','green','blue','gray']
2.controlArrows:
control the display and hide of the slide arrow, when it is flase, the arrow is hidden , The default arrow display
3. verticalCentered:
control whether the content of each page is displayed vertically, the default is true, generally we use the default value
4. resize:
control whether the font is scaled with the window zoom, the default is false
5. scrollingSpeed:
control Page scroll speed, the default is 700
6.anchors:
define anchor links, the default value is [], with anchor links, users can quickly locate a page. It should be noted that the naming of the anchor link cannot be repeated with the name and id on the page, especially in the IE browser. And you don’t need to add # to
locate the page when you define it, you need to add the active class name to the section div.
7.lockAnchors:
Whether to lock the anchor link, the default is flase, that is, the anchor link is not locked. When set to true, The defined anchor link has no effect. This configuration item is rarely used.
8. easing:
Defines the animation method of page section scrolling. The default is easeInOutCubic. If you modify this item, you need to introduce the animation plug-in of jquery.easings, or jquery.ui
9.css3:
Whether to use css3 transforms to achieve the scrolling effect, the default is true. This configuration item can improve the effect and speed of the browser or mobile terminal that supports css3. If the browser does not support css3, jquery will be used instead of css3 to achieve the scrolling effect (graceful degradation).
10.loopTop:
Scroll to the very top of the continuous rolling if in the end part, the default is false
11.loopBottom
whether the scroll to the very bottom of the continuous roll back to the very top, the default is false
12.loopHorizontal
whether the lateral slider slides rolling cycle, the default is true
13.
Whether autoScrolling uses the scrolling method of the plug-in, the default is true, if you select false, the browser's own scroll bar will appear, which will not scroll by page, but will scroll according to the default behavior of the scroll bar.
14.scrollBar:
Whether to include a scroll bar, the default is false, if it is set to true, the browser's own scroll bar will appear, and the scrolling of the page is still page-based, but the default behavior of the scroll bar is also valid.
15.paddingTop/paddingBottom:
Set the padding value at the top and bottom of each section page, the default is 0, but when there is a menu or navigation bar fixed at the top or bottom of the page, you can use these two items for configuration. (PaddingTop: "200px")
16.fixedElements
fixed elements, the default is null, you need to configure a jquery selector. When the page scrolls, the elements set by fixedElements are fixed.
17.keyboardScrolling
can use the keyboard arrow keys to navigate, the default value is true
18.tochuSensitivity
is the sensitivity of sliding pages on mobile devices, the default is 5, is measured by a percentage, the highest is 100, the larger the more difficult the sliding
19.continuousVertical:
Whether the page scrolls circularly, the default is false. If set to true, the page will scroll in a loop, so that the page will not jump like loopTop and loopBottom when scrolling. Note: This property is not compatible with loopTop/loopBottom, and cannot be set at the same time.
20. animateAnchor
anchor link can control the page scroll animation , The default is true. If set to false, there will be no animation effect
when positioning to a certain point on the page via anchor link 21.recordHistory
Whether to record the history, the default is true to record the scrolling history of the page, and navigate through the browser’s forward and back buttons. Note: If you set autoScrolling: false, then this configuration item will also be turned off, that is, set to false.
22.
Menu binds the menu. After setting the relevant attributes to correspond to the value of anchors, the menu can control scrolling. The default is false. Can be set as a selector of jquery
23.Navigation
whether to display navigation, the default is false, if set to true, small dots will be displayed, as navigation
24.navigationPosition
set the position of the navigation dots can be left or right The default is right
25.navigationTooltips
navigation dots Tooltips setting, the default is [], pay attention to set
26.showActiveTooltip
whether to display the tooltip information of the current navigation, the default is not to display (false)
27.slidesNavigation
whether to display the navigation of the horizontal slide, the default is false
28.SlidesNavPosition
horizontal slide The navigation position, the default is bottom, can be set to top or bottom
29. ScrollOverflow
Whether to display the scroll bar after the content exceeds the full screen, the default is false. If set to true, the scroll bar will be displayed. If you want to scroll to view the content, you also need the cooperation of the jquery.slimscroll plug-in. The Slimscroll plugin is mainly used to simulate the scroll bar style of traditional browsers.
30.
The selector of sectionSelector section defaults to .section
31.
The selector of slideSelector defaults to .slide
Fullpage method:
$.fn.fullpage.xxx()
1.moveSectionUp()
scroll up one page
2.moveSectionDown()
scroll down one page
3.moveTo(section,slide)
scroll to the page and slide Note: The page starts from 1, and the slide starts from 0.
4.silentMoveTo(section,slide) is the
same as moveTo(section,slide), but there is no animation effect.
5.moveSlideRight()The
slide is scrolled to the right
6.moveSlideLeft()
Slide left to scroll
7.setAutoScrolling(boolean)
8.setLockAnchors(boolean)
9.setRecordHistory(boolean)
10.setScrollingSpeed(millinsecond)
11.setAllowScrolling(boolean,[directions])
Add or delete mouse wheel or sliding control, first Enable when each parameter is true, disable when false, the following parameter is the direction, the value is all, left, right, up, down, you can use more than one, separate with comma when using more than one
12.destroy (type)
destroy the fullpage special effect, type can be omitted, or use all, not type, the style and html elements added by fullpage to the page are still there, if all is used, the style and html are all destroyed, and the page is restored or not. Same effect as using fullpage.
13.reBuild()
re-updates the page and size, which is used to rebuild the effect after changing the page structure through an ajax request.
Lazy loading
Picture:
Video:
Author: My Learning 123
link: https: //www.imooc.com/article/10367 block_id = tuijian_wz?
Source: Mu class network