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

我正在使用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上看到这个演示 。

Answer 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-stellar-moveleft或data-stellar-moveright来实现您所期望的，其余的