javascript - 如何在垂直滚动条上使用 Stellar.js 从侧面移动/动画元素？

Question

我正在使用 Stellar.js用于创建视差滚动效果的 jQuery 插件，但我不确定 Stellar 是否支持我想要实现的目标。我有基本的视差滚动影响正常工作(主要基于 this tutorial from TutsPlus )。

我想要完成的是让它在用户向下滚动页面时，某些元素从所有不同的 Angular 移动/动画进入 View ——与滚动位置相关联。例如，当用户向下滚动页面时，一个苹果从屏幕的右上角进入 View ，当用户继续向下滚动页面时，苹果沿着对 Angular 线路径移动到屏幕的左下角位置屏幕。如果用户向上滚动，苹果将以向后的方式继续沿着相同的路径前进。这对 Stellar 来说可能吗？我必须使用不同的插件吗？我可以使用 Stellar 的另一个插件来实现这种效果吗？

如有任何帮助，我们将不胜感激。如果您需要更多信息，请告诉我。

谢谢!

Answer 1

Stellar.js 支持创建 position property plugins这允许您编写自定义定位逻辑。

我写了一个示例插件，叫做“apple”，它做的事情类似于你想要的:

$.stellar.positionProperty.apple = {
    setTop: function($el, newTop, originalTop) {
        $el.css({
            'top': newTop,
            'left': $el.hasClass('apple') ? originalTop - newTop : 0
        });
    },
    setLeft: function($el, newLeft, originalLeft) {
        $el.css('left', newLeft);
    }
};

你会注意到它包含一个三元组，如果元素具有“apple”类，它只应用“left”值:

'left': $el.hasClass('apple') ? originalTop - newTop : 0

这是一个示例，说明您可以如何为每个元素应用不同的定位逻辑。

现在，您可以像这样使用插件:

$.stellar({
    horizontalScrolling: false,
    positionProperty: 'apple'
});

显然，您需要对此进行调整以适合您的目的，但这应该足以让您入门。

您可以 see a demo of this in action on JSFiddle .