滚动元素的交叉溶解过渡

Question

我正在创建一个长单页网站并使用 ScrollMagicJS v1.3.0 来触发事件并使某些元素具有粘性。我想在向下滚动页面时创建各种其他过渡效果。

Here's a 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 滚动来完成此操作的巧妙方法。

我考虑过的事情：下一页在当前页面下滑动，然后使用 ScrollMagic 触发器从 1.0 过渡到 0 不透明度？

但是如何以一种非 hacky 且与 ScrollMagic 的框架一致的方式来做呢？

Answer 1

ScrollMagic 的问题部分已经提出并回答了这个问题： https://github.com/janpaepke/ScrollMagic/issues/269

这是一份副本：

一个常见的误解是您需要使用 ScrollMagic 引脚功能来完成所有操作。如果内容无论如何都没有在滚动流中移动（它保持在原位并淡出或移动到一边或诸如此类），您可以从一开始就将其设置为 "fixed" 。这样可以省去很多工作和混乱。

使用 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'
    });

我在 pin 和 z-index 上使用了 pushFollowers: false 将下一帧（也固定）滑动到第一帧后面。然后一个 Tween 溶解到第二帧中。结果是一个很好的电影溶解功能，持续时间可调。

希望对其他人有用。

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

滚动元素的交叉溶解过渡

Cross-dissolve transition for scrolled elements

javascript

jquery

horizontal-scrolling

scrollmagic