整页.js添加滑块淡入淡出效果

fullpage.js add slider fadeIn effect

本文关键字：淡出 淡入 js 添加 整页      更新时间：2023-09-26

我从来没有使用过整页.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;
        }
    });
});

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

  • 对整页.js幻灯片使用淡入效果
  • 如何在使用 entire Page.js 和 jQuery 的网站上淡入页面滚动内容

它似乎主要是使用整页.js幻灯片事件来触发jQuery动画的问题。

这个jsfiddle似乎可以做你想做的事（使用部分）。

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

我正在使用一些简单，更有效的东西。 

    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;
    },

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

取

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

只需添加以下 CSS 即可覆盖整页.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;
}

更新

现在可以通过整页.js扩展来完成。

相关文章：