Scroll plugin – fullpage.js usage

What is fullpage.js?

This is my first article on getting started, I mainly use for the official website,H5 to make full screen effects, but it supports mouse scrolling, support forward and backward and keyboard control, multiple callback functions, support mobile phone, tablet touch events, support CSS3 Animation, support for window scaling, automatic adjustment when window scaling, configurable scroll width, background color, scroll speed, loop options, callbacks, text alignment, and more.

How to use fullpage.js

It can be used in jQuery or Vue. Js, which I’m using in jQuery

Set each screen to have type Section, and the Active class specifies which screen to jump to when entering the page

<link rel="stylesheet" href="./css/jquery.fullPage.css">
<div id="box">
    <div class="section">section1</div>
    <div class="active section">section2</div>
    <div class="section">section3</div>
    <div class="section">section4</div>
</div>
Copy the code

To start quickly, execute the function after the document loads to initialize the Fullpage configuration information

<script src=". / public/jquery - 1.8.3. Min. Js. ""></script>
<script src="./public/jquery.fullPage.js"></script>
<script>
// jQuery initializes fullPage
$(document).ready(function() {$('#box').fullpage({
        //options here
        autoScrolling:true.scrollHorizontally: true
    });

    //methods
    $.fn.fullpage.setAllowScrolling(false);
});
</script>
Copy the code

There are other configuration options you need to know in detail, all in the comments

$(document).ready(function() {$('#fullpage').fullpage({
    // Navigation
    menu: false.// Bind the menu. Once you have set the properties corresponding to your anchors value, the menu controls scrolling, default to false.
    anchors: ['firstPage'.'secondPage'].//anchors define anchor connection, default is []
    lockAnchors: false.// Whether to lock the cable connection. The default value is false
    navigation: false.// Whether to display navigation. Default is false
    navigationPosition: 'right'.// Navigate to the position of the dot
    navigationTooltips: ['firstSlide'.'secondSlide'].// Navigation dot prompts
    showActiveTooltip: false.// Whether to display the tooltip information for the current page
    slidesNavigation: true.// Whether to display horizontal slideshow navigation. Default is false
    slidesNavPosition: 'bottom'.// The horizontal navigation position, the default is bottom, can be set to top or bottom
        
    // Scrolling
    css3: true.// Whether to use CSS3 transforms for rolling effects. Default is true
    scrollingSpeed: 700.// Set the scroll speed in milliseconds, default 700
    autoScrolling: true.The default value is true. If the default value is false, the browser's built-in scroll bar will appear
    fitToSection: true.// Sets whether to adapt the entire window space. Default: true
    scrollBar: false.The default value is false. If the default value is true, the browser has a built-in scroll bar
    easing: 'easeInOutCubic'.// Define how the section of the page can be animated. If you change this, you need to introduce jquery.easing
    easingcss3: 'ease'.// Define the transition effect of page section scrolling. If you want to modify this item, introduce a third party plug-in
    loopBottom: false.// Whether to scroll continuously to the top after scrolling to the bottom. Default is false
    loopTop: false.// Whether to scroll continuously to the bottom after scrolling to the top. Default is false
    loopHorizontal: true.// Slide Whether the slide is rotated. Default is true
    continuousVertical: false.// Whether to scroll in a loop, incompatible with loopTop and loopBottom options
    normalScrollElements: '#element1, .element2'.// Avoid automatic scrolling when some elements, such as Baidu Map
    scrollOverflow: false.If true, the scroll bar will be displayed. If you need to scroll to view the content, jquery. slimScroll plugin is also required
    touchSensitivity: 15.// The sensitivity of scrolling on mobile devices is 5 and 100, the larger the more difficult it is to slide
    normalScrollElementTouchThreshold: 5.// Accessibility
    keyboardScrolling: true.// Whether you can use arrow keys to navigate. The default value is true
    animateAnchor: true.// Whether the anchor cable can control the scrolling animation, the default is true, if false, the anchor cable positioning failure
    recordHistory: true.// Whether to record history, default is true, browser forward and backward navigable. If autoScrolling:false, this attribute is disabled
      
    // Design
    controlArrows: true.// Define whether slide is controlled by an arrow. Default is true
    verticalCentered: true.// Define whether the content of each page is vertically centered. Default is true
    resize : false.// Whether the font scales with window scaling. Default is false
    sectionsColor : ['#ccc'.'#fff'].// Set background-color for each section
    paddingTop: '3em', set the padding at the top of each section. Default0
    paddingBottom: '10px', set the padding at the bottom of each section. Default0
    fixedElements: '#header, .footer', fixed element, default tonull, you need to configure a jquery selector. When the page scrolls, the elements set by fixElements do not scrollresponsiveWidth: 0.responsiveHeight: 0.// Custom selectors
    sectionSelector: '.section'.// Section selector. By default, a section
    slideSelector: '.slide'.// Slide selector, defaults to.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){}}); });Copy the code

Fullpage.js cutscene

Full screen loading can be used with wow.js, add animate. CSS when scrolling or leaving, and initialize wow,data-wow-duration, data-wow-delay, data-wow-delay, data-wow-delay.

The HTML code

<link rel="stylesheet" href="./css/jquery.fullPage.css">
<link rel="stylesheet" href="./css/animate.css">

<div id="box">
  <div class="section">section1</div>
  <div class="section">
    <h1 class="wow bounceIn" data-wow-duration="1.5 s" data-wow-delay="0.3 s">section2</h1>     
  </div>
  <div class="section">section3</div>
  <div class="section">section4</div>
</div>
Copy the code

Javascript code

<script src=". / public/jquery - 1.8.3. Min. Js. ""></script>
<script src="./public/jquery.fullPage.js"></script>
<script src="./public/wow.min.js"></script>
<script>
$('.box').fullpage({
  controlArrows: false.// The arrow used to control the slide slide, set to false, the arrows on both sides will disappear
  verticalCentered: true.// Is the content of each slide vertically centered
  / / rolling
  css3: false.scrollingSpeed: 700.continuousVertical: false.// Whether to scroll in a loop, incompatible with loopTop and loopBottom
  autoScrolling: true.navigation:true.anchors: ["s1"."s2"."s3"."s4"."s5",].scrollBar:false.afterRender:function(){
    // The callback function after the page structure is generated, or after the page is initialized
  },
  afterLoad: function(anchorLink,index){
    // the callback function after scrolling to a screen, anchorLink is the name of the anchorLink and index is the serial number, counting from 1
    if( index ! =0) {
      var wow = new WOW({
        boxClass: 'wow'.// The class of the element to animate
        animateClass: 'animated'.// animation.css the class of the animation
        offset: 0.// How far away from the viewable area to start animation init
        mobile: true.// Whether to perform animations on mobile devices
        live: true                // Whether the asynchronously loaded content is valid}); wow.init(); }},onLeave(index,nextIndex,direction){
    // Leave the screen}});</script>
Copy the code

In the js code above, I use index in the afterLoad callback to scroll the screen to determine which screen to scroll, trigger to specify the desired animation, or add the class name. And execute WOW init

Four,

If scrollBar:true is enabled, wowJS will not be compatible with fullPage. In addition, the fp-auto-height class name should be added to the footer.