Fullpage.js Full-screen scrolling plugin use method

Source: Internet
Author: User
Tags anchorlink

On the mobile side will often use full-screen scroll plug-ins, to achieve common H5 active page effect, fullpage is a very good jquery full-screen scrolling plugin

Fullpage.js plug-in api:http://www.dowebok.com/77.html

Common use methods:

// Configuration Examples $.fn.fullpage ({        anchors:["Page1", "Page2", "Page3"],    slidescolor:["#fff", "#000", "#333" ]   })
// Method Invocation Example // moveTo (section, slide) sets the screen to scroll to one of the sections or slide, two parameters are index values for a content block or anchor text, and by default the index of slide is set to 0. $.fn.fullpage.moveto (1,0)  // animation effect // no animation effect
//callback function$ (' #fullpage '). Fullpage ({anchors: [' FirstPage ', ' secondpage ', ' thirdpage ', ' fourthpage ', ' lastpage '], slidescolor:["#fff", "#000", "#333", "#666", "#999"],    //Scroll to a screen after the callback function, receive Anchorlink and index two parameters. //Anchorlink is the name of the anchor chain.//indexes are the index of the section, calculated from 1Afterload:function(Anchorlink, index) {varLoadedsection = $ ( This); //using index        if(Index = = 3) {alert ("Section 3 ended loading"); }        //using Anchorlink        if(Anchorlink = = ' Secondslide ') {alert ("Section 2 ended loading"); }    }//callback function before scrolling, receiving 3 parameters of Index, nextindex and direction//index is the serial number of the "page" leaving, starting 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. Onleave:function(Anchorlink, index) {varLeavingsection = $ ( 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!"); }    }});

Find a great help document: Help documentation

Fullpage.js Full-screen scrolling plugin use method

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.