javascript 如何在垂直滚动上使用 Stellar.js 从侧面移动/动画元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13149700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move/animate elements in from the side with Stellar.js on a vertical scroll?
提问by jjfrizzle
I'm using Stellar.jsjQuery plugin to create a parallax scroll affect, but I'm not sure if Stellar supports what I am trying to accomplish. I have the basic parallax scrolling affect working properly (largely based on this tutorial from TutsPlus).
我正在使用Stellar.jsjQuery 插件来创建视差滚动效果，但我不确定 Stellar 是否支持我想要完成的任务。我有基本的视差滚动效果正常工作（主要基于TutsPlus 的本教程）。
What I am trying to accomplish is to have it so while the user scrolls down the page, certain elements move/animate into the view from all different angles--being tied to the scroll position. For example, as the user scrolls down the page, an apple enters the view from the top right position of the screen, and as the user continues to scroll down the page, the apple moves in a diagonal path towards the bottom left position of the screen. Should the user scroll back up, the apple would continue along this same path in a backwards fashion. Is this possible with Stellar? Do I have to use a different plugin? Can I use another plugin WITH Stellar to achieve this affect?
我想要完成的是让它在用户向下滚动页面时，某些元素从所有不同的角度移动/动画进入视图 - 绑定到滚动位置。例如，当用户向下滚动页面时，一个苹果从屏幕的右上方位置进入视图，而当用户继续向下滚动页面时，苹果沿对角线路径向屏幕的左下方位置移动。屏幕。如果用户向上滚动，苹果将以向后的方式继续沿着相同的路径。这对 Stellar 有可能吗？我必须使用不同的插件吗？我可以使用另一个带有 Stellar 的插件来实现这种效果吗？
Any help on this would be greatly appreciated. If you need any more info, please let me know.
对此的任何帮助将不胜感激。如果您需要更多信息，请告诉我。
Thanks!
谢谢！
回答by markdalgleish
Stellar.js supports the creation of position property pluginswhich allow you to write custom positioning logic.
Stellar.js 支持创建位置属性插件，允许您编写自定义定位逻辑。
I've written a sample plugin, called 'apple', which does something resembling what you want:
我编写了一个名为“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);
}
};
You'll notice it includes a ternary which only applies the 'left' value if the element has the 'apple' class:
您会注意到它包含一个三元组，如果元素具有 'apple' 类，则该三元组仅应用 'left' 值：
'left': $el.hasClass('apple') ? originalTop - newTop : 0
This is an example of how you might apply different positioning logic for each element.
这是一个如何为每个元素应用不同定位逻辑的示例。
So now, you can use the plugin like so:
所以现在，您可以像这样使用插件：
$.stellar({
horizontalScrolling: false,
positionProperty: 'apple'
});
Obviously, you'll need to tweak this to suit your purposes, but this should be enough to get you started.
显然，您需要调整它以适合您的目的，但这应该足以让您开始。
回答by simey.me
Jaypee, I used this code to do it:
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);
}
};
Based off the original answer by markdalgleish, It takes the data-tag: data-stellar-moveleftor data-stellar-moverightto achieve what you desired, the rest of
根据markdalgleish的原始答案，它需要 data-tag:data-stellar-moveleft或data-stellar-moveright为了实现您想要的，其余的
