我使用Stellar.js jQuery插件创建的视差滚动的影响,但我不知道,如果恒星支持什么,我试图完成。 我有基本的视差滚动影响正常工作(主要是基于从TutsPlus本教程 )。
我试图做到的是把它所以当用户向下滚动页面,某些元素移动/动画成从各个不同角度的视图 - 被捆绑到滚动条的位置。 例如,当用户向下滚动该页面,苹果进入从屏幕的右上方位置上的视图,并且随着用户继续向下滚动页面,在朝向底部的对角线路径上的苹果向左移动的位置屏幕。 如果用户滚动起来之后,苹果将沿向后时尚这个相同的路径继续。 这可能与恒星? 我一定要使用不同的插件? 我可以用其它的插件与恒星来实现这一影响?
任何帮助将不胜感激。 如果您需要任何更多的信息,请让我知道。
谢谢!
Stellar.js支持创建position属性插件,它允许你编写自定义的定位逻辑。
我写了一个样本插件,叫做“苹果”,这确实类似的东西,你想要什么:
$.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);
}
};
你会注意到它包括三元如果元素有“苹果”类只适用于“左”值:
'left': $el.hasClass('apple') ? originalTop - newTop : 0
这是一个如何应用不同的定位逻辑的每个元素的例子。
所以,现在,你可以使用插件像这样:
$.stellar({
horizontalScrolling: false,
positionProperty: 'apple'
});
显然,您需要调整这个根据自己的意图,但这应该足以让你开始。
你可以看到这个演示中上的jsfiddle行动 。
的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
达到你想要的是什么,其余
文章来源: How to move/animate elements in from the side with Stellar.js on a vertical scroll?