滚动元素的交叉溶解过渡

Cross-dissolve transition for scrolled elements

本文关键字：元素 滚动      更新时间：2023-09-26

我正在创建一个长单页网站，并使用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滚动的聪明方法。

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

？

但是如何以一种非黑客的方式做到这一点，并与ScrollMagic的框架保持一致呢？

这在ScrollMagic的问题部分已经问过和回答了：https://github.com/janpaepke/ScrollMagic/issues/269

这是一份副本：

一个常见的误解是您需要使用ScrollMagic引脚功能执行所有操作。如果内容无论如何都没有在滚动流中移动（它保持在原位并淡出或移动到侧面或侧面），您可以从一开始就将其设置为"固定"。这样可以节省大量工作和混乱。

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

因此，如果您有适当的元素

并且应该被其他元素替换，请始终修复它们。像这样： https://jsfiddle.net/janpaepke/6kyd6ss0/1/

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

　
这是我

确定的解决方案。

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：假在引脚和 z 索引上滑动下一帧（也固定）在第一帧后面。然后补间溶解到第二帧中。结果是一个不错的电影溶解功能，持续时间可调。

希望对其他人有用。

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

相关文章：