3

Stellar.js jQueryプラグインを使用して視差スクロール効果を作成していますが、Stellarが私が達成しようとしていることをサポートしているかどうかはわかりません。基本的な視差スクロールの影響が正しく機能しています（主にTutsPlusのこのチュートリアルに基づいています）。

私が達成しようとしているのは、ユーザーがページを下にスクロールしているときに、特定の要素がスクロール位置に関連付けられて、さまざまな角度からビューに移動/アニメーション化されるようにすることです。たとえば、ユーザーがページを下にスクロールすると、アップルは画面の右上の位置からビューに入り、ユーザーがページを下にスクロールし続けると、アップルは斜めのパスで、の左下の位置に向かって移動します。画面。ユーザーが上にスクロールすると、アップルはこの同じパスに沿って逆方向に進みます。これはStellarで可能ですか？別のプラグインを使用する必要がありますか？この効果を実現するために、Stellarで別のプラグインを使用できますか？

これに関する助けをいただければ幸いです。さらに情報が必要な場合は、お知らせください。

ありがとう！

4

2 に答える 2

13

Stellar.jsは、カスタムポジショニングロジックを記述できる位置プロパティプラグインの作成をサポートしています。

私は「アップル」と呼ばれるサンプルプラグインを作成しました。これはあなたが望むものに似た何かをします：

$.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-stellar-moveleftまたはdata-stellar-moveright、希望することを達成するために、残りの部分

于 2013-08-07T11:28:46.807 に答える