fullpage.js在某个部分使用自定义转换 [英] fullpage.js Using a custom transition on one certain section

问题描述

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

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.

我不想从第1部分滑到第2部分，而是想让第1部分的背景更大，然后将其淡化，然后逐渐淡入第2部分。 ，这将是此幻灯片的自定义转换。

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.

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

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).

非常感谢任何指导。

推荐答案

更新

看看这个主题。您可以在回调中使用取消移动功能来阻止scoll并执行您自己的操作。

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.

或者，您也可以使用 $。fn .fullpage.setAllowScrolling（false）阻止fullPage.js滚动，然后使用你自己的 mousewheel 或触摸您可以创建的处理程序可以触发您自己的操作。

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.

请查看在fullPage.js问题论坛上处理此相关主题。

我想说目前还没有正确的方法。

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

这篇关于fullpage.js在某个部分使用自定义转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！