如何移动/上垂直滚动动画从Stellar.js侧面的元素呢?(How to move/animate

2019-07-03 11:40发布

我使用Stellar.js jQuery插件创建的视差滚动的影响,但我不知道,如果恒星支持什么,我试图完成。 我有基本的视差滚动影响正常工作(主要是基于从TutsPlus本教程 )。

我试图做到的是把它所以当用户向下滚动页面,某些元素移动/动画成从各个不同角度的视图 - 被捆绑到滚动条的位置。 例如,当用户向下滚动该页面,苹果进入从屏幕的右上方位置上的视图,并且随着用户继续向下滚动页面,在朝向底部的对角线路径上的苹果向左移动的位置屏幕。 如果用户滚动起来之后,苹果将沿向后时尚这个相同的路径继续。 这可能与恒星? 我一定要使用不同的插件? 我可以用其它的插件与恒星来实现这一影响?

任何帮助将不胜感激。 如果您需要任何更多的信息,请让我知道。

谢谢!

Answer 1:

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行动 。



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-moveleftdata-stellar-moveright达到你想要的是什么,其余



文章来源: How to move/animate elements in from the side with Stellar.js on a vertical scroll?