2

私は現在、いくつかの要素が視差効果を生み出す垂直スクロール サイトの 1 つを作成するのに役立つ視差プラグインに取り組んでいます。

ほとんどのプラグインは巨大な DIV タグを使用し、背景をスクロールします。私の場合、クライアントはアニメーション化されたキャラクター スプライトやその他のあらゆる種類の要素 (コンテンツなど) に視差を付けたいと考えているため、これは機能しません。背景を移動する代わりに、要素自体を移動する必要があります。これを行うプラグインをまだ見つけていません。

私のプラグインは、1 つの例外を除いて、かなりうまく機能しています。ぎくしゃくしたり重いスクロールをすると、要素がページ上で忍び寄り、垂直方向の開始位置に到達しません。以下に例を示します (ひどいスタイリングを許してください。大まかなモックアップです): http://www.nebulus.org/parallax-test

進行中のプラグインはこちら: http://www.nebulus.org/parallax-test/js/libs/jquery.scrollParallax.js

上下にすばやくスクロールすると、ページの上部にあるスプライトが開始位置からかなり離れていることに気付くでしょう。誰かが彼らを振る舞わせる方法について考えを持っていますか? ご協力ありがとうございます - プラグインが完成したらリリースする予定です (ナッジナッジ、ウィンクウィンク)。

4

1 に答える 1

1

位置の小さな変化 (containerScrollY1-containerScrollY2) = 1 または -1 の場合、丸めの問題があります。

newY = myPosY + (containerScrollY1-containerScrollY2)*params.inertiaY;
$base.css('top',newY+'px');

inertia = 0.251ピクセル下にスクロールした場合、1ピクセル上に スクロールした場合、次にどのフロアまでthen new = old - 0.25スクロールした場合 (コードを試してたくさんログに記録しました)、オブジェクトは1つ上に移動します。下にスクロールし、上にスクロールしてもまったく動きません。old - 1new = old + 0.25old

位置が大きく変化する場合 (先ほど説明したすばやくスクロールする場合)、問題はオブジェクトが表示されている場合にのみ移動することに起因します。isVisible内の条件を削除するhandleScrollingと、高速スクロールの問題はなくなります (すべてのスクロールが上記の丸めの問題を回避するのに十分な大きさである限り)。たとえば、100 ピクセルのスクロールにより、画面から 20 ピクセル離れたオブジェクトが、記録されていないジャンプで 80 ピクセル移動しました (つまり、myPosY80 ピクセルだけ同期がずれていました)。

これらの問題の両方を潜在的に修正するには、オブジェクトの元の位置をパラメーターとして保存し、常にこの絶対値から視差位置を計算します。これnewY = params.origY - $(params.container).scrollTop()*inertiaY は私の最後でうまくいきました。幸運を！

また、http://johnpolacek.github.com/scrollorama/は非常に優れており、試していない場合は視差があります。ただし、それがあなたの仕様で機能するかどうかはわかりません。

于 2012-07-05T09:15:28.783 に答える