【问题标题】:fullpage.js Using a custom transition on one certain sectionfullpage.js 在某个部分使用自定义转换
【发布时间】:2015-02-19 06:16:58
【问题描述】:

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

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

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

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

非常感谢任何指导。

【问题讨论】:

  • 我刚刚编辑了一些更具体的问题和我尝试过的代码。谢谢。

标签: jquery fullpage.js


【解决方案1】:

更新

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

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


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

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

【讨论】:

  • 我可以雇用你来制作我想要的效果吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-05-09
  • 2011-06-17
  • 1970-01-01
  • 2016-08-05
  • 1970-01-01
相关资源
最近更新 更多