javascript - ScrollMagic 销垫片太大

Question

我是 ScrollMagic 的新手，所以不确定我是否忽略了一些明显的东西。

我设置了一个 codepen这说明了我正在努力实现的目标，以及一个 alternative version 几乎做我想做的，除了有一个我似乎无法摆脱的巨大差距。

本质上是希望有 3 张相互堆叠的幻灯片。当用户滚动时，幻灯片会一张一张地向上过渡以显示下方的幻灯片。

当滚动到最后一张幻灯片时，页面上的剩余内容应该向上滚动，就好像它附加到最后一张幻灯片的底部一样，并且从那时起应该像普通页面一样工作。

目前，包含所有幻灯片的容器透明地重叠主体内容的其余部分，直到最后一张幻灯片从视口(viewport)顶部消失，而 ScrollMagic 正在执行此操作。

codepen 中的粉红色条旨在显示载玻片容器底部的结束位置。

相关代码如下:

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 (从你的codepen fork)