web-dev-qa-db-ja.com

jquery視差スクロール効果-多方向

クライアント用の多方向JQuery視差ページを作成する必要があります-彼らは基本的にこれと同じように機能することを望んでいます https://victoriabeckham.landrover.com/INT

私はアートワークの準備ができており、水平/垂直方向にスクロールできる多くのjqueryライブラリを見つけました。しかし、特定の座標で両方を組み合わせる方法がわかりません。誰か私を正しい方向に向けてもらえますか?

編集:私は当初、Superscrolaramaを調べてすべてが解決されたと考えてこの投稿をサインオフしました-しかし、それを実装するのに苦労しました-私が思ったほどの救世主だとは思いません、私は水平と垂直の両方の視差とスクロールする必要があります上記を達成し、それはサポートしていないようです-したがって、他のヒントはとても感謝しています!

23
Dancer

私は何かを一緒に投げましたjsfiddleはあなたのためです。

http://jsfiddle.net/9R4hZ/40/

スクリプトは、最初にすべてのオブジェクトの開始位置を初期化します。次に、矢印キーとマウスホイールのハンドラが設定されます。その後は、parallaxScroll関数のアルゴリズムの要です。

スクロールには矢印またはマウスホイールを使用します。

[左、右、上、下]からの遷移があります。

HTMLとCSSは本当にシンプルです。

それを実行するJS/jQueryは自明です。

これは興味深い効果で、芸術的なタイプのサイトを対象にしているようです。

20
Louis Ricci

Scrollrama http://johnpolacek.github.com/scrollorama/ またはCurtain http://curtain.victorcoulon.fr/ のようなライブラリを調べましたか?

あなたの質問で、あなたはすでにさまざまなライブラリーを調べたが、それらがどのように機能するかによっては、適切な座標の使用方法を実際に提案するのが難しいと言っていることを知っています。

*edit1

まだ表示されていない場合、scrolloramaのautherはsuperscrolloramaも実行しました。これにより、要素が固定されているときのアニメーションなどのアニメーションをさらに制御できます。

http://johnpolacek.github.com/superscrollorama/

6
NicMagnier

smashinghub.com のこの記事は、スクロールと視差効果のためのJQueryプラグインのコレクションを示しています。そのうちの1つが役立つと確信しています。 jQuery Scroll Path は、それらの中で最も高度であるか、要件に合っているようです。

5
Ma Jerez

私はここで遅くジャンプしていることを理解しています、これは非常に明白に思えるかもしれませんが、彼らが行ったものをリバースエンジニアリングしてみましたか https://victoriabeckham.landrover.com/INTScrollAnimatorスクリプト が作業の大部分を実行するように見えます。私は彼らのサイトをダウンロードしてローカルでそれを台無しにし、どのコンポーネントがどの機能を提供するのかがわかるまで部品を差し引いていきます。それから私はそれらを読んで彼らがどのようにそれを起こしたかを理解しました。

1
Kale McNaney

あなたは scrollpath plugin を使用しています

make path
0
Pankaj Thakur