Перекрестный переход для прокручиваемых элементов

Question

Я создаю длинный одностраничный веб-сайт и использую ScrollMagicJS v1.3.0 для запуска событий и закрепления некоторых элементов. Я хотел бы создать множество других эффектов перехода, прокручивая страницу вниз.

Вот jsfiddle, который копирует горизонтальную прокрутку моего сайта.

scrollControl = new ScrollMagic({
    vertical: false,
});

var myScrollScene = new ScrollScene({
    triggerHook: 0,
    offset: 0,
    triggerElement: '#shot-0-1',
    duration: '100vw',
    pushFollowers: true
})
    .setPin('#shot-0-1')
    .addTo(scrollControl);

Например, я хочу создать переходы между страницами с постепенным исчезновением на черный, бликов на белый и перекрестным растворением.

Я понимаю некоторые основные принципы переходов HTML5, как заставить одно изображение раствориться в другом, но я не смог придумать, как сделать это с помощью прокрутки ScrollMagic.

Вещи, которые я рассмотрел: Следующая страница скользит под текущей страницей, а затем изменяется с 1,0 до 0 с помощью триггеров ScrollMagic?

Но как это сделать не хакерским и совместимым с фреймворком ScrollMagic?

Answer 1

Об этом спрашивали и отвечали в разделе проблем ScrollMagic: https://github.com/janpaepke/ScrollMagic/issues/269

вот копия:

---

Распространенным заблуждением является то, что вам нужно делать все с помощью функции булавки ScrollMagic. Если содержимое в любом случае не перемещается в потоке прокрутки (оно остается на месте и исчезает или перемещается в сторону или что-то в этом роде), вы можете сделать его "фиксированным" с самого начала. Это экономит много работы и путаницы.

Единственная причина использования функции закрепления ScrollMagic - это когда элемент должен иногда прокручиваться естественным образом с помощью DOM, а иногда - нет.

Поэтому, если у вас есть элементы, которые находятся на месте и должны быть просто заменены другими, исправьте их все время. Как это: https://jsfiddle.net/janpaepke/6kyd6ss0/1/

Если это действительно так, то вам следует использовать метод закрепления ScrollMagic, а затем выполнить анимацию внутри оболочки, которую вы закрепляете. Как это: https://jsfiddle.net/janpaepke/6kyd6ss0/3/

Answer 2

Вот решение, на котором я остановился.

scrollControl = new ScrollMagic({
    vertical: false,
});

vw = $(window).width();
console.log("width:" + vw + "px");

// pin frame 2
var myScrollScene = new ScrollScene({
    triggerHook: 0,
    triggerElement: '#shot-2',
    // This pin is considerably longer than average
    offset: 0,
    // duration = stickyLength + disolve_duration
    duration: 1.5 * vw + 'px'
})
    .setPin('#content-2', {
        pushFollowers: false
    })
    .addTo(scrollControl)
    .addIndicators({
    zindex: 100,
    suffix: 'pin2'
});

//  move frame 3 up early and pin it
var myScrollScene = new ScrollScene({
    triggerHook: 0,
    triggerElement: '#shot-2',
    offset: 0,
    // duartion = 1.5, but why?
    duration: 1.5 * vw + 'px'
    // the faux pin doesn't actually expand the container the way SM does
    // so the results are a little strange
})
    .on("start end", function (e) {
        $('#content-3').css({left: 0, position:'fixed'});
    })
    .on("enter leave", function (e) {
        $('#content-3').css({left: 0, position:'relative'});
    })
    .addTo(scrollControl)
    .addIndicators({
        zindex: 100,
        suffix: 'pin3faux'
    });

var dissolve = TweenMax.to('#content-2', 1, {
    autoAlpha: 0
});

// dissolve frame 2 to frame 3
var myScrollScene = new ScrollScene({
    triggerHook: 0,
    // Note that though we are fading frame 2, we are
    // using the arrival of frame 3 the trigger
    triggerElement: '#shot-2',
    // The sets the rapidity of the dissolve
    // offset = stickyLength
    offset: 0.33 * vw + 'px',
    // The sets the rapidity of the dissolve
    duration: 1 * vw + 'px'
})
    .setTween(dissolve)
    .addTo(scrollControl)
    .addIndicators({
        zindex: 100,
        suffix: 'dissolve'
    });

Я использовал pushFollowers: false на выводе и z-index, чтобы сдвинуть следующий кадр (также закрепленный) за первым. Затем Твин должен раствориться во втором кадре. Результатом является хорошая кинематографическая функция растворения с регулируемой продолжительностью.

Надеюсь, что это полезно для других.

https://jsfiddle.net/wmodes/b4gdxeLn/