Прокладка для булавки ScrollMagic слишком большая

Я новичок в ScrollMagic, поэтому не уверен, что я упускаю из виду что-то очевидное.

Я создал codepen, который показывает, чего я пытаюсь достичь, и альтернативная версия, которая почти делает то, что я хочу, за исключением огромный разрыв, от которого я не могу избавиться.

По сути, хотелось бы иметь 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);
}

javascript jquery gsap scrollmagic
person Pete    schedule 06.04.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

По умолчанию это сделано для того, чтобы закрепленные элементы не перекрывали следующие элементы в документе.

Вам нужно установить для свойства 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 (разветвленный из вашего кода )

person Alex Gill    schedule 06.04.2016
comment
Привет, Алекс, спасибо, что нашли время ответить. Ваш разветвленный код выглядит так же, как первый, который я связал в своем OP: codepen.io/ pete-naish / pen / wGPZPb. Я надеялся, что контент будет после перехода третьего слайда вверх по странице, как если бы он был прикреплен к нижней части слайда, а не находился в слое ниже и просто открывался. Имеет ли это смысл? - person Pete; 06.04.2016
comment
@ Пит, теперь я понимаю, что ты имеешь в виду. Вы думали об использовании вместо него параллакса, потому что, вероятно, вы могли бы получить аналогичный эффект? - person Alex Gill; 06.04.2016