fullpage.js 添加滑块淡入效果

Question

我从未与 fullpage.js 合作过。我尝试了很多滑块过渡效果。滚动效果很好，带有滑块效果。它随着滚动从左到右移动，但不能添加淡入淡出效果。

示例站点：http://www.mi.com/shouhuan/#clock 我的代码：http://jewel-mahmud.com/demo-site/index.html

var slideIndex  = 1,
    sliding     = false;

$(document).ready(function() {

    $('#fullpage').fullpage({

        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
        scrollingSpeed:1000,
        css3: true,

        onLeave: function(index, nextIndex, direction) {

            if(index == 2 && !sliding) {

                if(direction == 'down' && slideIndex < 3) {

                    sliding = true;
                    $.fn.fullpage.moveSlideRight();
                    slideIndex++;
                    return false;

                } else if(direction == 'up' && slideIndex > 1) {
                    sliding = true;
                    $.fn.fullpage.moveSlideLeft();
                    slideIndex--;
                    return false;
                }

            } else if(sliding) {

                return false;

            }

        },

        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {

            sliding = false;

        }

    });
});

Answer 1

这些页面讨论了添加淡入淡出效果：

看来主要是使用fullpage.js幻灯片事件触发jQuery动画。

This jsfiddle 似乎做你想做的事（使用部分）。

看起来有两种方法可以做这种事情，这取决于您要制作动画的内容。 fullpage.js 内置了两种视图，.section 和 .slide，幻灯片是部分的子视图，它们有不同的回调。这些示例使用幻灯片，但您使用的是部分，所以我认为这就是混淆的来源。转换为淡入淡出效果需要连接到正确的回调并应用正确的动画（部分和幻灯片之间有所不同）。

Answer 2

我正在使用对我来说更简单、更高效的东西。

    onLeave: function(index, nextIndex, direction) {
        if( index == 2 && direction == 'down'){
            $('#slide1').fadeOut(700);
            $('#slide2').fadeIn(700);
        }

        if( index == 3 && direction == 'down'){
            $('#slide2').fadeOut(700);
            $('#slide3').fadeIn(700);
        }
    },

    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
        sliding = false;
    },

但问题是滑动时无法修复滚动条。我试过先生。但是我无法调整它。

Answer 3

取自。虽然远非完美，因为 fullpage.js 中定义的滚动速度在这里不会生效，您必须在 CSS 中定义它。此外，它仅适用于部分而不适用于水平幻灯片。

只需添加以下 CSS 即可覆盖 fullpage.js 样式。

.section {
    text-align: center;
}

.fullpage-wrapper {
    width: 100%!important;
    transform: none!important;
}

.fp-section {
    width: 100%!important;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 0;
    transition: all .7s ease-in-out;
}

.fp-section.active {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}

更新

现在可以通过 a fullpage.js extension 来完成。

fullpage.js 添加滑块淡入效果

fullpage.js add slider fadeIn effect

javascript

jquery

slider

fadein

fullpage.js

更新