Shulou(Shulou.com)06/03 Report--

This article will explain in detail about the full-screen scrolling plug-in fullPage.js, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Use method to include files

If you prefer, you can install fullPage.js using bower or npm:

/ / use bowerbower install fullpage.js// and use npmnpm install fullpage.js

HTML structure

The first line of HTML code in the HTML file must be declared with HTML DOCTYPE, or you may encounter a snippet height problem. Example in HTML 5 doctype:.

Some section

Some section

Some section

Some section

Each code snippet is defined as an element that contains .section. The first code snippet is activated by default as the first screen. The code snippet should be included in the parent element. Note that the parent element cannot be a body element.

If you want to define a different starting page instead of the original first paragraph or first sliding page, just add the .active class to the segment or sliding page you want to load first.

Some section

Javascript

To initialize with native Javascript, you only need to call fullPage.js before closing the tag.

New fullpage ('# fullpage', {/ / options here autoScrolling:true, scrollHorizontally: true}); / / methodsfullpage_api.setAllowScrolling (false)

JQuery can also be used for initialization, as long as the jQuery library is referenced first.

$(document) .ready (function () {$('# fullpage'). Fullpage ({/ / options here autoScrolling:true, scrollHorizontally: true}); / / methods $.fn.fullpage.setAllowScrolling (false);})

Functional option

The more complex initialization of all option settings is as follows:

Var myFullpage = new fullpage ('# fullpage', {/ / Navigation menu:'# menu', / / bind menu. After the relevant properties set correspond to the value of anchors, the menu can control scrolling lockAnchors: false, / / (default is false) to determine whether the anchor in URL is fully valid in the library. You can still use anchors inside functions and callbacks, but they have no effect when scrolling the site. This is useful if you want to use anchor points in URL to combine fullPage.js with other plug-ins. Anchors: ['firstPage',' secondPage'], / / defines the anchor link to be displayed on the URL of each section (# example). The value of the anchor should be unique. The location of the anchor in the array will define to which part the anchor is applied. Navigation: false, / / if set to true, a navigation bar consisting of small circles navigationPosition: 'right', / / (default none) can be set to left or right, and define the location of the navigation bar display (if used) navigationTooltips: [' firstSlide', 'secondSlide'], / / (default is []) define a tooltip to use the navigation circle. If you prefer, you can also use the attribute data-tooltip in each section to define them showActiveTooltip: false, / / display persistent tooltips slidesNavigation: false for actively viewing sections in vertical navigation, / / if set to true, a navigation bar is displayed, which consists of a small circle of each horizontal slider on the site. SlidesNavPosition: 'bottom', / / defines the position of the horizontal navigation bar of the slider. The values are top and bottom. / / scrolling css3: true, / / whether to use CSS3 transforms scrolling scrollingSpeed: 700, / / scrolling speed in milliseconds autoScrolling: true, / / whether to use plug-in scrolling, if you select false, the browser's own scroll bar fitToSection: true will appear, / / determine whether section is placed in the window fitToSectionDelay: 1000, / / if fitToSection is set to true Then the delay is in milliseconds scrollBar: false, / / determines whether to use the site's scroll bar. With scrollbars, the autoScrolling feature will still work as expected. Users can also use the scroll bar to freely scroll through the site, and when scrolling is complete, fullPage.js will adapt to the part of the screen. Easing: 'easeInOutCubic', / / defines the transition effect for vertical and horizontal scrolling. Easingcss3: 'ease', / / defines the transition effect to use if css3:true is used. LoopBottom: false, / / whether to scroll back to the top after scrolling to the bottom loopTop: false, / / whether to scroll to the bottom after scrolling to the top loopHorizontal: true, / / defines whether the horizontal slider cycles through continuousVertical: false, / / after reaching the previous slide or slide, and is not compatible with loopTop and loopBottom normalScrollElements:'# element1, .element2', / / if you want to avoid automatic scrolling when scrolling certain elements This is the option you need to use scrollOverflow: false, / / whether to display the scroll bar touchSensitivity: 15 after the content exceeds the full screen, / / defines the percentage of browser window width / height, and the distance that must be measured when sliding to the next section / slide normalScrollElementTouchThreshold: 5, / / defines the hop threshold of the html node tree Fullpage will test whether the normalScrollElements matches to allow scrolling on the touch device. BigSectionsDestination: null, / / defines how to scroll to a section larger than the viewport. By default, if you come from the upper part of the destination, the fullPage.js scrolls to the top, and if you come from below the destination, it scrolls to the bottom. The possible value is top,bottom,null. / / access keyboardScrolling: true, / / define whether the content animateAnchor: true can be browsed using the keyboard, / / define whether the load of the site with a given anchor (#) will scroll to its destination with the animation or directly load the given part recordHistory: true, / / define whether the status of the site will be pushed to the browser's history. When set to true, each part / slide of the site will be a new page, and the browser's back and forward buttons will scroll the part / slide to reach the previous or next state of the site. When set to false, URL keeps the changes, but does not affect the browser's history. This option is automatically turned off when using autoScrolling:false. / / Design controlArrows: true, / / determine whether to move the slide's control arrow to the right or left verticalCentered: true, / / center vertically inside the paragraph. When set to true, your code will be wrapped by the library. Consider using a delegate or loading another script sectionsColor in the afterRender callback: ['# ccc','# fff'], / / define the CSSbackground-color attribute paddingTop: '3emitted, / / distance from the top paddingBottom:' 10pxmarker, / / distance from the bottom fixedElements:'# header, .footer', / / define which elements will be removed from the plug-in's scrolling structure when the css3 option is kept fixed. It requires a string with a Javascript selector for these elements. (for example: fixedElements:'#element1,.element2') responsiveWidth: 0, / / A normal scroll (autoScrolling:false) will be used in pixels under the defined width. If users want to use their own responsive CSS for body markers, the fp-responsive class is added to the body tags. For example, if set to 900, the plug-in scrolls like a normal site whenever the width of the browser is less than 900. ResponsiveHeight: 0, / / A normal scroll (autoScrolling:false) will be used in pixels at a defined height. If users want to use their own responsive CSS for body markers, the fp-responsive class is added to the body tags. For example, if set to 900, the plug-in scrolls like a normal site whenever the height of the browser is less than 900. / / Custom selector sectionSelector: '.section', / / defines a Javascript selector for the plug-in section. Sometimes changes may be needed to avoid problems with other plug-ins that use the same selectors as fullpage.js. SlideSelector:'. Slide', / / defines the Javascript selector used for plug-in slides. Sometimes changes may be needed to avoid problems with other plug-ins that use the same selectors as fullpage.js. LazyLoading: true, / / delayed loading is activated by default, which means that it delays loading any media element / / event onLeave that contains the attribute data-src: function (index, nextIndex, direction) {}, / / callback function before scrolling, receiving index, nextIndex and direction parameters: index is the sequence number of the departed "page", calculated from 1; nextIndex is the sequence number of the scrolled "page", calculated from 1 Direction determines whether to scroll up or down, and the value is up or down. AfterLoad: function (origin, destination, direction) {}, / / after scrolling ends, a callback will be triggered once the section is loaded. AfterRender: function () {}, / / this callback is triggered immediately after the page structure is generated. This is the callback function that you want to use to initialize other plug-ins, or trigger any code that requires documentation ready: afterResize: function (width, height) {}, / / this callback will be triggered after resizing the browser window. AfterResponsive: function (isResponsive) {}, / / after fullpage.js changes from normal mode to response mode or from response mode to normal mode, this callback will be triggered by afterSlideLoad: function (section, origin, destination, direction) {}, / / after scrolling ends, the callback will be triggered after loading a slide of section. OnSlideLeave: function (section, origin, destination, direction) {} / / this callback is triggered as soon as the user leaves the slide and moves to another slide. Returning to false will cancel the move before it occurs. });

Method

MoveSectionUp () scroll up

MoveSectionDown () scroll down

MoveTo (section, slide) scroll to

MoveSlideRight () slide scroll to the right

MoveSlideLeft () slide scroll to the left

SetAutoScrolling () sets the mode of page scrolling, which scrolls automatically when set to true

SetAllowScrolling () add or remove mouse wheel / touchpad control

SetKeyboardScrolling () add or remove keyboard arrow key controls

SetScrollingSpeed () defines the scrolling speed in milliseconds

Other delayed loading

FullPage.js provides a way to delay the loading of image, video, and audio elements so that they do not slow down the loading speed of the site or waste data transfer. When using deferred loading, all of these elements are loaded only when you enter the viewport. To enable deferred loading, you simply change the src property to data-src, as follows:

If you have already used another lazy loading solution that uses data-src, you can disable fullPage.js lazy loading by setting the lazyLoading: false option.

Auto playback

Using the attribute autoplay for video or audio, or the parameter autoplay=1 for youtube iframe will cause the media element to be played when the page is loaded. Loading in paragraphs / slides is used instead of attribute data-autoplay playback. For example:

suspend

Embedded HTML5/ and Youtube iframe automatically pause when leaving a paragraph or slide. You can disable it by using the property data-keepplaying. For example:

About the full-screen scrolling plug-in fullPage.js to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.