ScrollMagic管脚间隔太大

Question

我刚开始接触ScrollMagic，所以不确定是否有什么明显的东西让我忽略了。

我已经设置了一个码页，它说明了我想要实现的目标，还有一个替代版本，它几乎可以实现我想要的结果，除了一个巨大的差距，我似乎无法消除。

本质上看，有3张幻灯片是堆叠在一起的。当用户滚动时，幻灯片一个接一个地过渡到显示下面的一个.

当滚动通过最后的幻灯片时，页面上的其余内容应该向上滚动，就像它附在最后一张幻灯片的底部一样，并且从那时起应该像普通页面一样在功能上滚动。

目前，包含所有幻灯片的容器透明地与主体内容的其余部分重叠，直到最后一张幻灯片从视口顶部消失，并且是ScrollMagic在这样做。

代码页中的粉红条旨在显示幻灯片容器底部完成的位置。

以下是相关代码：

function initController() {
    controller = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: "onLeave"
        }
    });

    controller.scrollTo(function(pos) {
        TweenMax.to(window, 1, {
            scrollTo: {
                y: pos,
                autoKill: true
            }
        });
    });
}

function initAnimation() {
    wipeAnimation = new TimelineMax();

    $.each(ui.slides, function(i, slide) {
        wipeAnimation
            .add(TweenMax.to(slide, 2000, {y: '0'}))
            .add(TweenMax.fromTo(slide, 5000, {y: '0'}, {
                y: '-100%',
                onComplete: function() {
                    if (i < ui.slideCount - 1) { // don't run on last slide
                        updateActiveSlide(ui.slides[i + 1]); // activate next slide
                    }
                },
                onReverseComplete: function() {
                    updateActiveSlide(slide);
                }
            }));
    });
}

function initScene() {
    scene = new ScrollMagic.Scene({
        triggerElement: ui.el,
        duration: '100%'
    })
    .setTween(wipeAnimation)
    .setPin(ui.el, {
        pushFollowers: false
    })
    .addTo(controller);
}

Answer 1

默认情况下，这是为了停止文档中与下列元素重叠的固定元素。

您需要将“pushFollowers”属性设置为false：

function initScene() {
    scene = new ScrollMagic.Scene({
        triggerElement: ui.el,
        duration: '100%'
    })
    .setTween(wipeAnimation)
    .setPin(ui.el, {
        pushFollowers: false
    })
    .addTo(controller);
}

见文档：http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.Scene.html#setPin

// pin element and push all following elements down by the amount of the pin duration.
scene.setPin("#pin");

// pin element and keeping all following elements in their place. The pinned element will move past them.
scene.setPin("#pin", {pushFollowers: false});

工作示例：https://codepen.io/alexgill/pen/MyOMKP (从您的代码分叉)