3

我正在使用Stellar.js jQuery 插件来创建视差滚动效果，但我不确定 Stellar 是否支持我想要完成的任务。我有基本的视差滚动效果正常工作（主要基于来自 TutsPlus 的本教程）。

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

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

谢谢！

4

2 回答 2

13

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 上看到这个演示。

于 2012-11-04T20:33:23.723 回答
2

Jaypee，我用这段代码来做到这一点：

$.stellar.positionProperty.custom = {
  setTop: function($el, newTop, originalTop) {

    if( $el.data('stellar-moveleft') !== undefined ) {
      $el.css({ 'left': originalTop - newTop });
    } else if( $el.data('stellar-moveright') !== undefined ) {
      $el.css({ 'right': originalTop - newTop });
    }

    $el.css({ 'top': newTop });

  },

  setLeft: function($el, newLeft, originalLeft) {
    $el.css('left', newLeft);
  }

};

根据markdalgleish的原始答案，它需要 data-tag:data-stellar-moveleft或者data-stellar-moveright为了实现您想要的，其余的

于 2013-08-07T11:28:46.807 回答