0

我正在创建一个长单页网站并使用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 不透明度？

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

4

2 回答 2

1

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

这是一个副本：

一个常见的误解是您需要使用 ScrollMagic pin 功能来完成所有操作。如果内容无论如何都没有在滚动流中移动（它保持在原位并淡出或移动到侧面或诸如此类），您可以从一开始就将其“固定”。这节省了大量的工作和混乱。

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

因此，如果您的元素已经到位并且应该被其他元素替换，那么请始终将它们固定。像这样：https ://jsfiddle.net/janpaepke/6kyd6ss0/1/

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

　
于 2015-03-18T15:25:36.840 回答
0

这是我确定的解决方案。

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/

于 2015-04-24T07:46:50.930 回答