javascript - 滚动元素的交叉溶解过渡

我正在创建一个很长的单页网站，并使用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的框架一致的方式来实现呢？

最佳答案

在ScrollMagic的问题部分中已对此进行了询问和回答：
https://github.com/janpaepke/ScrollMagic/issues/269

这是副本：



一个常见的误解是您需要使用ScrollMagic引脚功能来做所有事情。
如果内容在滚动流中始终不移动（它保持原位并逐渐淡出或移到侧面或其他方向），则可以从一开始就将其固定为“固定”。
这样可以节省大量工作和混乱。

使用ScrollMagic的固定功能的唯一原因是元素有时应随DOM自然滚动而有时不应随DOM自然滚动。

因此，如果您有适当的元素并且应该被其他元素替换，请在整个过程中对其进行修复。
像这样：https://jsfiddle.net/janpaepke/6kyd6ss0/1/

如果确实是这种情况，则应使用ScrollMagic的固定方法，然后在固定的包装器内进行动画处理。
像这样：https://jsfiddle.net/janpaepke/6kyd6ss0/3/

关于javascript - 滚动元素的交叉溶解过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29092811/