fullpage.js 在某个部分使用自定义过渡

Question

我使用 fullpage.js 是因为它的超级基本功能：使我网站上的每个部分都达到视口的全高，并在从一个部分滚动到另一个部分时锁定滚动条。

我不想从第 1 部分滑动到第 2 部分，而是想通过将第 1 部分的背景放大并淡出，然后淡入第 2 部分来为第 1 部分的背景制作动画。基本上，这将是这张幻灯片的自定义过渡.

该插件有一个事件实例 OnLeave，它允许在用户滚动经过某张幻灯片时执行某些操作：

        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!");
        }
    }

虽然活动效果很好，但我不知道如何添加延迟以便动画可以在页面滚动到下一部分之前完成。另外，如前所述，我想淡出到下一部分而不是向下滑动（如果可能的话）。

非常感谢任何指导。

Answer 1

更新

看看this topic。您可以在回调中使用取消移动功能来防止滚动并执行您自己的操作。

或者，您也可以使用 $.fn.fullpage.setAllowScrolling(false) 来防止 fullPage.js 滚动，然后使用您自己可以创建的 mousewheel 或 touch 处理程序，您可以触发自己的处理程序动作。

请查看 this related topic 在 fullPage.js 问题论坛上处理。

我会说目前没有合适的方法。

fullpage.js 在某个部分使用自定义过渡

fullpage.js Using a custom transition on one certain section

jquery

fullpage.js

更新