問題タブ [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 投票する
2 に答える
56268 参照

jquery - jQueryを使用してPNGシーケンスをアニメーション化するにはどうすればよいですか(スクロールまたはトリガーされたアニメーションのいずれかによって)

pngが一連のDIV(または1つのdiv)に読み込まれ、ボタンのクリックまたはスクロールに基づいてフレームごとにシーケンスされるという効果がますます見られます。私はコードを覗き見しようとしました、そして私はjavascriptが重労働をしていることを理解しています、しかし私はまだ少し迷っています、このテクニックに関するチュートリアルはありますか?例?

アニメーションの例(複数のdiv) http://atanaiplus.cz/index_en.html

アニメーションの例(1 div): http ://www.hyundai-veloster.eu/

スクロールアニメーションの例:http: //discover.store.sony.com/tablet/#design/ergonomics

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

jquery - 視差効果jQueryで原点背景位置を設定

このjQueryコードを使用して、スクロール時に視差効果を作成しています:

問題は、私の背景画像が開始時にウィンドウの上から 300px にあることです。このコードでは、この原点位置を設定して上から 300px で背景のスクロールを開始することはできません。背景画像は直接 top:0px にジャンプします。

そしてもう1つ:

特定の位置に到達すると効果を停止することは可能ですか (例: 背景位置が 300px に達した場合、動きを停止するだけです)

それについてのアイデアはありますか?ありがとう!

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

jquery - 初期読み込み時のChromeスクロールラグ

私が構築しているサイトで一日中何が悪いのかを正確に把握しようとしていて、私は一生の間何が悪いのかを理解することができません。

このサイトの主な機能の1つは視差スクロールです。これは、ユーザーが下にスクロールすると、複数のレイヤーがアニメーション化され、スムーズに表示されるはずです。

基本的に、サイトhttp://beta.residencyradio.com/がChrome(Windows上)に読み込まれ、ページを下にスクロールしようとすると、かなりの遅延が発生し、スクロールが非常に速くなります。

ただし、アドレスバーに移動し、アドレスをクリックしてEnterキーを押してから、もう一度スクロールを試みると、スムーズにスクロールします。

私はこれで髪を引き裂いています、それはマックのクロームにも影響を与えていると思います、それで誰かがこれで何が起こっているのか考えているなら、それは大きな助けになるでしょうそして大いに感謝されます!

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

iphone - スワイプジェスチャで視差スクロールをスムーズにする方法

ジェスチャ認識をサポートするために、から利用できるジェスチャクラスを追加しました。左/右にスワイプして移動するトップレイヤーに4つのスプライトがあり、ボトムレイヤーでスワイプする3つのスプライトがあります。

私は次のコードを持っています

右/左にスムーズにスワイプできません。topLayerが重なっています。レイヤーの動きをスムーズにするのを手伝ってください。

あらゆる種類のヘルプが高く評価されます

ありがとう...

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

objective-c - 視差:レイヤー上のポイントを他の視差レイヤーの座標空間に変換する

cocos2d親レイヤーの子として、次のzオーダーとディメンション(オフセットなし)を持つ3つのサブレイヤーがあります。

最上層:z:-1幅:2048高さ:2048
中間層:z:-2幅:1536高さ:1536
最深層:z:-3幅:1024高さ:1024

cocos2dで使用されるglViewのサブビューとしてUIScrollView(ViewControllerに接続されている)を使用して、各レイヤーの位置を次の比率で変換(したがってスクロール)します(したがって、3D効果を実現します)。

最上層:dragPt.x * 1(yについても同じ)
中間層:dragPt.x * 0.75(yについても同じ)
最深層:dragPt.x * 0.5(yについても同じ)

次のように、各レイヤーでユーザー入力を検出します
。-次のサイズのglViewに別のサブビュー(seeThroughと呼びます)をアタッチします(アプリは横向きモードです)
--(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)eventこのサブビューで使用して、タッチポイントを「touchLocation」という名前のiVar。
-cocos2d-layerで、次のコードを使用して、各レイヤーのタッチ位置を決定します。

(320は画面の高さであり、そこからYをUIからgl座標系に変換する必要があります)

レイヤーをスクロールすると、それらの位置は負になります。seeThroughビューを参照プラットフォームとして使用して480x320サーフェスのタッチをキャプチャすることにより、seeThroughビューでキャプチャされたポイントから各レイヤーの負の位置の値を差し引くだけで、各レイヤーの座標系のタッチ位置を正しく特定できます。
問題は、そのような参照ポイントがまったくない場合です。たとえば、ユーザー入力なしでレイヤーの1つでスプライトの位置を取得しようとした場合です。
基準点がないので、cocos2dレイヤーの1つで特定の点を特定できる解決策を思い付くことができません。

私はいくつかの方法(convertToNodeSpace、convertToWorldSpace、そして日が経つにつれて最終的にはワイルドな数学)を試しましたが、どれも成功しませんでした。

したがって、私の質問は次のとおりです。レイヤーの1つにあるスプライトの位置を特定し、それを他のレイヤーの1つのスペースに変換するにはどうすればよいですか。

シナリオ:
-スプライトはdeepestLayerにありますが、midLayerの場所に移動したい
-スプライトはtopmostLayerにあり、deepestLayerに移動したい
-など...

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

jquery - Facebook アプリ内で Parallax を使用することはできますか?

私は Web デザインの Parallax に関するチュートリアルとショーケースを調べていましたが、それらはすべて jQuery を使用してページで目的の結果を達成しています。Facebook アプリ内で視差効果を使用することはできますか? 特にページ内のアプリ (ページ タブ)。

Facebook タブ アプリが一部の jQuery 関数で正しく動作しないことに気付きました。これにより、スクロールの目的の結果が損なわれる可能性があります。また、iframe 内にあり、視差 + iframe で悪い結果がいくつか見られました。

優れた視差コードのリファレンス: Smashing Magazine Parallax Tutorial

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

iphone - iPhone:wp7メトロUIのような視差スクロール効果

iOSアプリの場合、WindowsPhone7でハブの視差効果を再現したいと思います。次のコードを使用して到達できます。

しかし、効果は完璧ではありません。WP7では、ハブの最後のページで、背景画像の右側がビューの右側に完全にフィットします。

ここで、画像がscrollview width / 2よりも小さい場合は、viewControllerbackgroundColorを表示できます...

スクリーンショット

scrollview contentSize.width、image.frame.size.width、および新しいscrollview.contentOffset.xに応じて、画像の新しいx位置を取得したいと思います。目標は、スクロールビューの最後のページで私の背景画像の位置が

私を助けてください !ありがとう !

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

android - スクロールする背景を描く方法は?

2D横スクロールゲームで背景タイルを描画するにはどうすればよいですか?そのループはOpenGL esにとって論理的ですか?私のタイル2400x480。また、ゲームに視差スクロールを使用したいと思います。

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

jquery - HTML5 / jQuery 視差効果 -- 「背景サイズ」の問題

このチュートリアルを使用してサイトを構築したところ、マイナーなバグが発生しました。

縦方向のページの各「セクション」の背景画像として使用したい一連の写真 (サイズは約 700 ~ 800 ピクセル) があります。

CSS を使用して画像を読み込むのに問題はありませんが、次のコマンドを使用して画像のサイズを変更してフルスクリーンにしようとすると、

また

jQuery のスクロール アニメーションが途切れ途切れ/遅延します。

明確にするために、画像が通常のサイズで読み込まれると(ウィンドウ全体がいっぱいにならない場合)、ページは非常にスムーズにスクロールします.

助言がありますか?CSSを使用して画像のサイズを変更するさまざまな方法は? 遅延を防ぐために jQuery スクリプトを最適化する方法はありますか?

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

javascript - tokiolab.it に似た視差効果を行うにはどうすればよいですか?

私はjQueryのパララックスについてたくさん読んできましたが、まったくわかりません。このサイトと同じことをしたい:

http://www.tokiolab.it/#/

ご覧のとおり、最初のページは非常に簡単なアニメーションですが、スクロールすると次のページが最初のページの一部をカバーし始めます。誰かが私を少し助けることができます.z-indexを使用する必要があることは知っています.

どうもありがとう!前もって感謝します!