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引脚功能完成所有操作。如果内容无论如何都不在滚动流中移动（它保持在适当的位置并且淡出或移到侧面或者像那样），你可以将它作为＆＃34;固定＆＃34;从一开始。这节省了大量的工作和困惑。

使用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/

滚动元素的交叉溶解过渡

2 个答案: