css - fullpage.js:使用 CSS 淡入幻灯片

Question

我正在尝试更改幻灯片的 Action 。我想让它们淡入而不是移动幻灯片。

同时保持部分相同，因此它们将继续正常移动。

我在默认设置上添加了以下内容，但它似乎没有生效:

CSS:

 .fp-slidesContainer {
    width: 100%!important;
    transform: none!important;
}

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

.fp-slide.active {
    visibility: visible;
    opacity: 1;
}

http://www.ahimsainvestments.com - 视差的其余部分仍然正常运行

Answer 1

您可以使用 Fading Effect extension 来完成此操作.

您必须使用最新的视差版本 (0.0.9) 和最新的淡化效果版本 (0.0.6)。然后使用 parallax: 'sections' 和 fadingEffect: 'slides'。