問題タブ [parallax]

パララックス技術を使ったサイトを作りました。前面の視差レイヤーにアニメーション付きの透明なフラッシュ ムービーを使用しました。マウス カーソルがムービーの上にある場合、サイトの残りの部分とは対照的に画面が震えているように見えますが、移動はよりスムーズに見えます。それが映画のサイズと関係があるかどうかはわかりません。幅は 1450px、高さは 825pxです。

前もって感謝します

ウェブサイトに視差効果を実装しようとしています。しかし、質問があります。ページの特定の部分でこれを行うことはできますか? または、ウェブサイトの一部を強制的に静的にし、他の部分をパララックスにすることはできますか?

ヘッダーとフッターがあり、それらの位置は CSS で「position:fixed;」で定義されています。ですから、それらの間に視差効果を持たせたいと思います。これは、画像の位置などによって問題が発生する可能性があると思います。

私は調査を行い、効果がすべてのページにグローバルであることがわかったことに基づいて、すべてのパララックス Web サイトを作成しました。

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

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

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

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

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

私はそのナイキサイトのように視差スクロールで遊んでいます。そのため、 scrollTopを使用してページ上のユーザーの垂直位置を決定し、その値の変更に基づいて要素の位置を調整しました。

ここでは、scrollTop値を丸めてログに記録します。ログは後で表示します。

次に、クリックすると、渡したscrollTop値にスクロールするこの関数を呼び出します。

ここに問題があります。アニメーション化する前に、スクロールトップの値が0にジャンプします。

だから私はページの途中にいて、ログに記録します：

私が物を配置する方法は、scrollTop値の精度に依存しています。だから私の質問は：

アニメーションを実行する前に、scrollTop値が0にジャンプしないようにするにはどうすればよいですか？

さらに情報が必要な場合はお知らせください。
サイトのライブバージョンは次のとおりです：http ：//theblueeyeguy.com/moon/Illumination/

（[次へ]、[前へ]の順にクリックして解除します）

マップを自動的にスクロールするようにしましたが、マップが最後に到達する前にスクロールを遅くする方法を知りたいです。私のゲームは、敵が隠れるための避難所があるマップの終わりに到達する前に、プレイヤーが敵を撃とうとするものなので、これを行う方法を知りたいです。敵がシェルターに到達する前にスクロールを遅くし、敵がシェルターに到達したらマップのスクロールを停止したいと思います。コードは次のとおりです。

ユーザーが最初にマウスをドキュメントの上に置くと、前景レイヤーがマウスカーソルに向かって移動し、マウスカーソルが前景レイヤーの中心に来るようにするjquery視差効果を作成しています。その後、ユーザーがマウス カーソルの周りを移動すると、フォアグラウンド レイヤーがマウス カーソルの反対方向に移動する必要があります。背景レイヤーも反対方向に移動しますが、視差効果を生成する速度は遅くなります。

問題は、イベントを使用してフォアグラウンド レイヤーがマウス カーソルに向かって移動し、mouseoverイベントをトリガーした後、フォアグラウンド レイヤーmousemoveとバックグラウンド レイヤーが別の場所に「ジャンプ」することです。

jsfiddle

多くのチュートリアルを見てきましたが、構築しようとしているものとは似ていません...

3 つのスプライト (背景、レイヤー 1、レイヤー 2) で視差ビューを作成する

画面のスクロールを実装する方法とスプライトは異なる速度で移動しますか?

どんな提案も素晴らしいでしょう！

PSタッチイベントを使いたい（スワイプしてスクロールするとき）

視差スクロール効果を作りたいです。以下の方法を使用しましたが、サブ DIV が追加されるとラップされます。

Chipmunk と Cocos2d for iPhone を使用する横スクロール プラットフォーマーがあります。プレーヤーは、レベルの一方の側からレベルの反対側に移動して、レベルを完了します。プレイヤーは実際に一方の側から他方の側に移動します。スクロールの錯覚を作成するために背景が繰り返されることはありません。

ただし、視差の背景でこれを行う方法については混乱しています。レベルは x 座標で 3000 くらいになります。そんなに大きな画像は使用できません。また、プレーヤーが特定の場所に立っているわけではないため、プレーヤーが特定のポイントに到達した後に画像を繰り返すこともできません。

助言がありますか？

UIScrollView を使用してアプリのメイン メニューを作成する必要があります。その中にクリックできる画像がいくつかあります。UIScrollView をスクロールすると、バックグラウンドで移動する他の 2 つのビューが必要になり、視差効果が生じます。誰かが私にサンプルコードを提供できますか? 私は一緒に仕事をしようとしています

しかし、私のプロジェクトへの適用に関する生産的な例は見つかりません。