問題タブ [parallax]

つまり、これが Parallax イベントの実行を開始するすべてのコードです。Lee Brimelow によるlayersmagazine.com のコードを使用しています。

マウスをステージの左または右に移動すると、視差効果がうまくスクロールしますが、ロード時に自動的に視差効果を開始し、少しスクロールしてから停止し、マウスによる制御に切り替えることを望みます。 .

スクロールがうまく機能しないため、MouseOver イベントはあまり効果的ではありません。

これは私の最初の投稿であり、完璧に配置されていない場合はお詫びします。

基本的に、Red Bull Art of Flight 映画の Web サイトで見事に利用されているものと同じまたは類似の効果を達成しようとしています。

http://artofflightmovie.com/

つまり、ユーザーがページを下にスクロールすると、背景画像が座標のパスに沿って移動します。現時点では、コンテンツのアニメーションについて心配する必要はありません。背景のアニメーションだけです。

基本的なことはできますが、背景を a から b アニメーションに移動できますが、b から c、c から d などに移動したい場合はどうすればよいかわかりません。

公開されているものを使用してみました：

これにより、ユーザーがスクロールしたときに背景位置の変更を設定できますが、次のアニメーションをどのように設定するかわかりません。私の最初の考えは、else if を使用することでしたが、これは成功しませんでした。

artofflightmovie.com の例では、バックグラウンド位置の px 測定値の配列を設定し、タイムラインのように読み取ります。

CSS をどうしたいかは問題ありませんが、jQuery に関する私の知識は、私が抱えている問題を克服できるレベルに達していません。

また、Art Of Flight ページのソースを取得し、簡略化されたバージョンを作成して構築しようとしましたが、これもあまり役に立ちませんでした.

任意の助けをいただければ幸いです

ロンドン地下鉄の地図に基づいてウェブサイトを構築しようとしています。さまざまな色の線でさまざまな駅に行き、さまざまなメニュー項目を提示するというアイデアです。既に構築されているプラ​​グインを見つけようとしていますが、他にアイデアがあるかどうか疑問に思っていますか? またはうまくいくかもしれないものの提案。

私が見つけることができる唯一のプラグインは joelb.me/scrollpath/ です。これは行をたどる方法が非常に似ていますが、jQuery を初めて使用するので、自分のニーズに合わせて編集するのに苦労しています。

だから私は、このようなパララックス スタイルのサイトを作成しようとしています。ただし、画像が動かない効果のために「固定」添付ファイル付きの背景画像を使用しているのに対し、jquery スライドショー プラグインを使用したいと考えています。基本的に、画像がスライダーに含まれている場合、画像の「固定」添付ファイルと背景位置をどのように達成できますか? 現在、スライドショーの画像はスクロールするだけです...

途中で必要な情報があれば、コード サンプルを提供させていただきます。

ありがとう！

独自のカスタム視差プラグインを作成して、項目が画面から遷移する方向を選択できるようにしようとしています。ユーザーがどのようにスクロールしても、サイズに関係なく、それを確認することに固執しています。オブジェクトが正しいポイントで消えるウィンドウ。

現在私は持っています：

ご想像のとおり、これは項目が画面から消えるまで右に移動するだけです。スクロールホイールを使用すると、スクロールバーを使用すると消えるまでに時間がかかるため、この方法ではさまざまな結果が得られます。また、混合物を使用したり、別のビューポートを使用したりすると、別の結果が得られるという別の問題もあります。

私が求めている結果を達成するためのヒントや指針はありますか?

私のコードの実例はhttp://motoring.egl.me.ukにあります

ありがとうマット

ここのページを@http: //8020indie.com/wp-content/uploads/TEC/で表示すると、すべてが正常に機能していることがわかりますが、 http： //8020indie.comなどのハッシュを使用してページにアクセスすると/wp-content/uploads/TEC/index.htm#content2、コンテンツdivの水平位置がオフになっています。任意のアイデアをいただければ幸いです。ありがとう

http://www.perandersen.no/sandbox/robot/

横スクロールアドベンチャー/パズルゲームのゲームベースを書いてみました。Chrome でいくつかのパフォーマンスの問題があり、IE と Safari ではバグがあるように見えますが、FF と Opera では問題ありません。

コードをより効率的にすることは可能ですか? 視差効果を実現する別の方法はありますか? これがすべてのブラウザで同じように機能しないのは本当にイライラします...

javascriptで視差効果を使用していますが、iPadで問題が発生しています。

「$（window）.scroll」がWebkit touch devidesでトリガーされないことはわかっていますが、画面を離したときのみです。そのため、次を使用しています。

問題は、上または下にスクロールしているかどうかに応じて、.divCancasが上または下に数ピクセルちらつくことです。

$（element）.css（'top'、initialTop-（scrollTop * speed））;に渡されたTOP値を追跡しました。そしてそれは毎回正しいです。正しい「TOP」値。ただし、Webkitはそれを数ミリ秒の間間違った位置に移動します。

私も試しました：-「top」ではなく「margin-top」で違いはありません。-他のすべてのオブジェクトを削除し、「。each」を1つのdivのみでループさせるので、jQueryのパフォーマンスの問題ではないと思います。

誰かがこの問題に遭遇しましたか？

ディエゴに感謝します

当サイトではパララックススクロールを採用しています。
線形関数に従って異なるペースでスクロールする両側に 4 つのレイヤーがあり、非常にシンプルです。

ただし、特に複数のタブを開いている場合は、思ったほどスムーズではありません。
スクロールと視差画像の更新の間にわずかな遅延と、フレームレートの低下が見られます。

フレームレートは小さい画面の方がはるかに優れています (私は 27 インチの画面で開発しています) が、すべての画面で最高のパフォーマンスを得たいと考えています。

スクロールを設定するコードは次のとおりです。

これは CoffeeScript ですが、ほとんどの JS 開発者にとって理解できるほど単純であることを願っています。

私がすでに行っていること:

• すべての要素をプリフェッチして、関数ですぐにアクセスできるようにします。
• をプリフェッチして、background-position-x反復ごとにフェッチする必要がないようにします。
• オーバーヘッドが増えるため、スタイルの設定に jQuery を使用しないでください。
• すべてをできるだけ少ない回数で計算します (したがってbaseTop)

各レイヤーは静的に配置されているため、ジッターが発生せず、ページのリフローが発生しないように背景の位置を変更するようにしています.

他に試してみることはありますか？

パフォーマンスは画面サイズに比例するため、これは JS の問題というよりはレンダリングの問題だと思います。派手な CSS3 が役立つかもしれません。