問題タブ [parallax]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
3 に答える
366 参照

javascript - キーボードの矢印を使用してスクロールできるWebサイト上のポイントの作成

かなり長い視差サイト(12kピクセルなど)で作業しています。スクロールポイントのリストを作成したいのですが、これによりユーザーエクスペリエンスが向上すると思います。

私がする必要があると思うこと:1)スクロールポイントで構成される配列を作成します。たとえば、0px 850px 1300px 2000px 2500px(簡単に理解できるので:) 2)keydown keyCode == 37 move(animate )前のポイントに、keyCode==39またはkeyCode==32で次のポイントに移動します3)最初のスクロールポイントの場合、最後のスクロールポイントと同じように、前のスクロールポイントが存在しないため、前のポイントに移動しないでください

誰かが私にコードの書き方を少し教えてもらえますか?javascript / jquery(またはプログラミング)を使用するのは初めてです

0 投票する
1 に答える
1383 参照

jquery - ページで視差プラグインを複数回使用していますか?

視差効果のためにgithubが使用するこのプラグインを使用しています:

https://github.com/cameronmcefee/plax

これは素晴らしいプラグインですが、1 つのページで複数回使用したいと考えています。

したがって、これは機能していません。機能させるためにできる簡単なことがあると確信しています。

0 投票する
0 に答える
2785 参照

jquery - 特定の位置でスクロールして div を移動する

ユーザーがページの特定のポイントに到達したときに小さなアニメーションを実行しようとしています:

ユーザーが 1000px までスクロールすると (たとえば)、ユーザーのスクロールに応じて移動する必要がある「雲」という div があります。

ユーザーが下にスクロールすると雲は左に移動し、上にスクロールすると雲は右に移動します。

このコードを試してみましたが、残念ながら機能しません (問題は、div が開始時の位置を保持しないことです)。

どんな助けでも大歓迎です!ありがとう!

0 投票する
1 に答える
588 参照

java - タイル Java & パララックス

Tiled の GitHub Java バージョンでの視差レイヤーの暫定的なサポートがどのように適切に機能するかを知っている人はいますか?

コンパイルされ、正常に実行されます。ただし、レイヤーをviewplane distance0.00 (最小値)に設定し、レイヤーを 0.00 に設定するとeye-viewplace distance、ゲームのビューポートを表す黄色の四角形がエディター ビューで 1:1 スクロールすることが予想されます。そうではなく、エディター ビューの左端までスクロールすると、黄色の「ビューポート」の四角形が画面から半分はみ出してしまいます。

ツールを誤解していますか、それとも動作状態にありませんか? 私がそれを理解できれば、Slick2D の TiledMap クラスを拡張して、レイヤーを視差深度でレンダリングすることは簡単です。

0 投票する
2 に答える
18261 参照

javascript - マウスホイールとスクロールバーを使用したスムーズな垂直ページスクロール

私は遊んで視差のウェブサイトを構築しようとしています-はい、私は彼らが迷惑な流行であることを知っていますが、それでも行きたいです。それで、インスピレーションを得るために、私は良い視差のウェブサイトのさまざまな例を見ていて、これに出くわしました:https ://victoriabeckham.landrover.com/INT 。

マウスホイール、スクロールバー、アンカーリンクを使用したスムーズなスクロールが可能です。私はこの効果を実現するjQueryプラグインを探していましたが、内部ページリンク(アンカーまたはID(以下で詳しく説明))を使用するプラグインのみを見つけることができますが、マウスホイールとスクロールバーは見つかりません。間違ったキーワードを使用して検索している可能性があります。これらのプラグインを見つけるための正しい用語を知っている人、またはこの効果を実現するプラグインを知っている人はいますか?

ちなみに、私は現在jQueryとJavascriptを学んでいますが、非常に初期の段階にあります。まだcodeacademyをトロールしていて、実際のコードにはまだ到達していません。ですから、現時点では学習の手段としてプラグインで遊んでいますが、うまくいけば、数か月以内に自分のものを作成できるようになります。

タグまたはIDを固定するためのスムーズなスクロール:

また、同様のスクロール手法を使用した視差Webサイトの別の例:

0 投票する
1 に答える
1408 参照

javascript - .animate .scrollTop()でスクロールすると、オペラの画面がちらつく

これが私が取り組んでいるウェブサイトです:http: //kognitek.nazwa.pl/stockize/mak/MMprodukcja/parallaxProject/stronaTestowa/test.html

オペラの矢​​印キーで下にスクロールしている間、サイトがちらつきます。スクロールに使用するコードは次のとおりです。

私はすでにこれを修正しようとしてしばらく時間を費やしましたが、それでもこの動作の理由を見つけることができません。サイトはChrome、Firefox、IE8、IE9で正常に動作します。問題はOperaでのみ発生します。index.htmlの最後にコードx3のこの部分があることはわかっています。解決策が見つかったら、すぐにこれを最適化するつもりです。

ここで何が問題なのですか?

編集:

私はこのフィドルを作成しました:http://jsfiddle.net/mymlyn/Mr5vR/最初はスクリプトは問題ないように見えますが、一番下に到達してもう一度上に移動しようとすると、画面がちらつき始めます

Edit2:

私はそれがデフォルトの問題を防ぐと思います、これをatmで解決します

EditX:

このファイルの編集に失敗しなかったので、コミュニティwikiにはなりませんでした...とにかくコードをアップグレードし、ここで入手できます: http : //cssdeck.com/labs/swayiqbq/2.browserを使用しています。 jquery1.9。

0 投票する
3 に答える
7005 参照

javascript - リクエストアニメーションフレームについての質問

サイトのスクロール中にいくつかの要素を移動する視差サイトを構築しようとしています。しかし、私が使用しているスクロール イベント リスナーを使用する代わりに、ポールアイリッシュによるこの投稿と、スクロール リスナーは少しバグがあると述べたこのビデオrequestAnimationFrameを読んだ後です。私の質問は次のとおりです。

  1. Chrome では非常に滑らかに見えますが、Firefox ではひどくちらつきます。ここで何か間違ったことをしましたか?
  2. 私のコードは、実際に通常のスクロール イベント リスナーを使用するよりも多くのリソースを消費していますか? このコードで遊んでいるたびに、ラップトップのファンが燃えているのが聞こえます。

私のファイルはhttp://www.socialbuzz.com.au/index.htmlにあります。ページの一番下までスクロールして、JavaScript から操作されている要素を確認してください。

0 投票する
2 に答える
589 参照

javascript - 視差エスクロリング効果

このページと全く同じことをしたいです。http://www.googleventures.com/

ページ下部を下にスライドすると視差効果が出てきます。画像をヘッダーとして使用するにはどうすればよいですか?純粋なjquery?onSlide機能はありますか?

0 投票する
2 に答える
1325 参照

jquery - ページのさまざまなセクションに視差効果を実装するにはどうすればよいですか?

ウェブサイトに視差効果を実装したいと思っています。この種のスクロール効果を、互いに影響を与えることなくページのさまざまな部分に実装できるかどうかを知りたいです。

やりたいことの少し単純化した例を作成しました。スプライト(赤い円と緑の四角)を実際の背景とは異なる速度で上に移動させたいです。ただし、a)とb)の例は、異なるDIVにあり、同じコンテナー内の別のdivにある不規則な境界線があります。このような:

スプライトをdivと境界線を通して上向きに移動する方法はありますが、メインの背景(この場合は青)には表示されません。

セクションb)の正方形はセクションa)まで移動しますか、それともオブジェクトが移動できるピクセル数またはパーセンテージポイントを制限する方法はありますか?

例