2

私はまだJavascript/Jquery / HTML5 / CSS3に慣れていないので、経験豊富なプログラマーの皆さんに質問したいと思いました。

私は自分のプログラムロジックの最初でちょっと立ち往生しています。視差「スクロール」効果のあるウェブサイトを作りたいのですが、効果はユーザーが画面の端にあるナビゲーションボタンをクリックしたときにのみ発生するはずです。

ウェブサイトのレイアウトは次のようになります。

 O
OXO
 O

「O」はコンテンツdiv、「X」は「ホームページ」ページ（起点）です。ユーザーが画面上部の矢印をクリックすると（原点から）、ページが上にスクロールします。他の方向についても同じことが言えます。視差効果を使用して、「スクロール」する特定のコンテンツdivに基づいて位置をシフトする、背景にある施設の1枚の巨大な写真が必要です。

私はこれからどこから始めればよいかを考えようとして2日間頭を悩ませてきました。何か助けていただければ幸いです。何か具体的にする必要がある場合はお知らせください。ありがとうございました！

4

1 に答える 1

3

ホームページのコンテンツは視差体験の真っ只中にあります。

このため、Webページで適切なナビゲーションを可能にするために、垂直視差効果と水平視差効果の両方を処理できる視差プラグインが必要になります。

検討してください： jQuery用のスクロール視差プラグイン

上記の視差デモページでは、両方向にスクロールできます。

これが私がこのプラグインを使って取る方法/アプローチです。

1.必要に応じて、水平および垂直のコンテンツを使用してWebサイトを設計します。レイアウト例：

OOO     Here, the top of the webpage is content about the "starting" point.
OXO     Next, you have content on the sides of the "starting" point as shown.
OOO     Finally, content is below the "starting" point to complete the webpage.

2. Webページの訪問者には、望ましくないWebページの最上部が表示されるため、jQuery.scrollTo()プラグインを使用して、ページの読み込みの「開始」ポイントを設定します。

3.各ビューポート側の「固定」位置にある4つの透明な矢印「div」を許可するプラグインまたはメソッドを使用します。マウスでクリック（またはホバー）すると、これによりスクロールバーの動きがシミュレートされ、視差Webページプラグインがそれに応じて反応します。レイアウトの例（外側のナビゲーションは半透明であることに注意してください）： 

UUUUU     Webpage top-content is here plus the overlay arrow for UP Navigation.
LOOOR     LEFT and RIGHT Navigation arrows are seen on top of more "top" content.
LOXOR     The center starting point will show the "fixed" Navigation arrows.
LOOOR     LEFT and RIGHT Navigation arrows are seen below the "starting" point.
DDDDD     Bottom-content is here plus the overlay arrow for DOWN Navigation.

Webページの最も難しい部分は、「開始」ポイントの上部と側面を占める十分な「フィラーコンテンツ」を用意することです。しかし、その「フィラーコンテンツ」がサムネイルギャラリーである場合、この特定の視差ページは本当に見栄えがします（そして珍しいです！）。

于 2012-07-12T19:10:56.183 に答える