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

Question

我正在使用Stellar.js jQuery插件创建一个视差滚动效果,但我不确定Stellar是否支持我想要完成的任务.我有基本的视差滚动影响正常工作(主要基于TutsPlus的本教程).

我想要完成的是在用户向下滚动页面时使用它,某些元素从所有不同的角度移动/动画到视图中 - 被绑定到滚动位置.例如,当用户向下滚动页面时,苹果从屏幕的右上方位置进入视图,并且当用户继续向下滚动页面时,苹果在对角线路径中朝向左下方位置移动.屏幕.如果用户向上滚动,苹果将以向后的方式沿着相同的路径继续.Stellar可以实现吗？我必须使用不同的插件吗？我可以使用另一个插件WITH Stellar来实现这种效果吗？

任何有关这方面的帮助将不胜感激.如果您需要更多信息,请告诉我.

谢谢!

Answer 1

Stellar.js支持创建位置属性插件,允许您编写自定义定位逻辑.

我写了一个名为'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'
});

显然,你需要调整它以适合你的目的,但这应该足以让你开始.

你可以在JSFiddle上看到这个演示.