fullPage.js配置Fading Effect效果代码

fullPage.js是一个JavaScript库，用于创建全屏滚动的网站。如果你想添加淡入淡出（fading effect）效果，你可以通过配置它的options对象来实现。以下是设置渐变过渡效果的基本步骤：

// 引入fullPage.js库
import FullPage from 'gsap-fullpage';

// 创建FullPage实例并传递配置项
var fp = new FullPage({
    sectionsColor: ['color1', 'color2', 'color3'], // 每个部分的颜色数组
    scrollingSpeed: 700, // 滚动速度
    easing: 'easeInOutQuad', // 过渡动画使用的缓动函数
    loopHorizontal: true, // 是否启用水平循环
    loopVertical: false, // 是否启用垂直循环
    menu: '#menu', // 导航菜单元素ID
    afterLoad: function(index) { // 每次加载完页面后的回调
        GSAP.to('section', {
            opacity: 1, // 开始时全透明
            duration: 500, // 动画持续时间
            ease: 'linear', // 使用线性缓动
            scale: 1, // 缩放比例
            yoyo: true, // 循环播放
        });
    },
});

// 如果你想让某个特定的滑动事件具有淡入淡出效果，可以加上这样的逻辑
fp.onLeaveSection(function(index, nextIndex, direction) {
    var currentSection = document.querySelector('.section'+index);
    var nextSection = document.querySelector('.section'+nextIndex);

    GSAP.to(currentSection, {
        opacity: 0,
        duration: 500,
    }, "easeInOutQuad");
    GSAP.to(nextSection, {
        opacity: 1,
        duration: 500,
    }, "easeInOutQuad");
});

在这个例子中，我们设置了每个部分的初始颜色，并在`afterLoad`回调里应用了一个淡入淡出的效果。当从一个section切换到另一个时，会触发`onLeaveSection`事件，从而控制当前section淡出，下个section淡入。