fullpage.js在某个部分使用自定义转换

时间:2015-02-19 06:16:58

标签: jquery fullpage.js

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

不是从第1部分滑动到第2部分,而是希望通过使第1部分的背景更大并将其淡化来为第1部分的背景设置动画,然后逐渐淡入第2部分。基本上,这将是此幻灯片的自定义转换。 / p>

该插件有一个事件实例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!");
        }
    }

虽然事件很有效,但我不知道如何添加延迟,因此动画可以在页面滚动到下一部分之前完成。另外,如前所述,我想淡出到下一部分而不是向下滑动(如果可能的话)。

非常感谢任何指导。

1 个答案:

答案 0 :(得分:1)

更新

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

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


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

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