Question

我试图在fullpage.js插件的各个部分之间添加一些视差效果背景

代码就是这样的

<div class="fallpage">
  <div class="section">content</div>
  <div class="parallex-background"></div>
  <div class="section">content</div>
  <div class="parallex-background"></div>
  <div class="section">content</div>
</div>

一切正常，fullpage.js忽略那些视差部分，除了滚动部分...鼠标不再工作或键盘控制，侧点和菜单工作正常

如果我可以让插件在鼠标滚轮滚动和键盘控制工作的情况下忽略各部分之间的视差背景，那就太棒了：）

抱歉任何拼写错误

Answer 1

你不能那样做。 Fullpagejs只会期望各部分之间的部分。

你可以做的是使用fullpage.js选项。将它们用作部分，为它们使用fp-auto-height类，以便它们不会全屏显示，并使用一些回调强制fullpage.js在您即将到达时跳转它们：

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(index, nextIndex, direction){
        var destinationToIgnore = $('.section').eq(nextIndex -1).hasClass('ignore');

        if(destinationToIgnore){
            var destination = (direction === 'down') ? nextIndex + 1 : nextIndex - 1
            $.fn.fullpage.moveTo(destination);
        }
    }
});

我已经编写了这个脚本，你只需要使用你的部分中的类ignore来强制fullpage.js忽略它，例如：

<div class="section fp-auto-height ignore">
    <div class="parallax">
        PARALLAX
    </div>
</div>

Reproduction online

现在你可以给我一个投票，一个拥抱，一个棒棒糖，甚至捐赠！ :)

如何在Fullpage.js

1 个答案: