fullpage.js Using a custom transition on one certa

问题:

I'm using fullpage.js for it's super basic functions: make each section on my site full height of viewport and to lock the scroll when scrolling from section to section.

Instead of sliding from section 1 to section 2, I want to animate the background of section 1 by making it larger and fading it out, then fading into section 2. Basically, this would be a custom transition for this slide.

The plugin has an event instance OnLeave which allows to execute something when user scrolls past a certain slide:

        onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);

        //after leaving section 2
        if(index == 1 && direction =='down'){
             $('.section1').animate({ backgroundSize: '150%' }, 1000);
             do another css animation
        }

        else if(index == 1 && direction == 'up'){
            alert("Going to section 1!");
        }
    }

Although the event works great, I don't know how to add a delay so the animation can finish before the page scrolls to next section. Also, as mentioned before, I would like to fade to the next section rather than slide down (if that's a possibility).

Any guidance is greatly appreciated.

回答1:

Update

Take a look at this topic. You can use the cancel move feature in a callback to prevent the scoll and do your own actions.

Or, you can also use $.fn.fullpage.setAllowScrolling(false) to prevent fullPage.js to scroll and then using your own mousewheel or touch handlers you can create you can trigger your own actions.

---

Please take a look at this related topic treated on fullPage.js issues forum.

I would say there's no proper way to do it at the moment.