3

この質問はばかげているように聞こえるかもしれませんが、頭が混乱しています。さまざまなスライドで構成された、一種の縦​​スクロール プレゼンテーションを作成したいと思います。効果はこのサイトと「似ている」はずです: http://www.soleilnoir.net/believein/#/start

別のスライドを含む順不同のリストを作成しました。

<div id="main">
  <div id="content">
    <ul id="bg">
      <li id="slide1"> <!-- content --></li>
      <li id="slide2"> <!-- content --></li>
    <!-- and so on -->
    </ul>
  </div>
</div>

position:fixedすべてのスライドのコンテンツ (これまでは画像) にページの中央に を指定し、スライドと画像を積み重ねるために別の z-index を指定しました。何かのようなもの

-----  slide 1
  §§§ image 2
-----  slide 2
  §§§ image 3
----   slide 3

等々

もちろん、これはある意味でのみ機能します。スライドをスクロールすると、次のスライドが表示されますが、前の画像は常に表示され、位置が固定されているため、フローからすべて削除されます。

そこで、画像に aposition:absoluteを与える (そして に与える) ことposition:relativeを考えまし<li>たが、新しいスライドが到着してそれをカバーするまで、ページの中央に「くっつく」ことはありません。もちろん、それらは自然に親<li>の動きに従います。

私はこれについて完全に途方に暮れています。また、ウィンドウに現在表示されているリストを取得する方法についてもです。jQueryscrollTop()によって提供されるすべての組み込み関数を見てきましoffset().topたposition().top:スクロール）、スライドが画面の半分に達したときに何かを実行できるようにする方法がわかりません（ただし、何をするかはまだわかりません）。$(window).height()$('#container').height()<li>

ここで明らかな何かが欠けていると確信しています。リンクされたサイトのコードを調べましたが、ほとんどすべてを理解できますが、現在のスライドを取得する方法をまだ理解できません (さらに、アニメーション GIF を動的にロードし、私の場合、各スライドは異なる要素、アニメーションなどを含むコンテナーです)。

たとえば、$('li#slide3')内部ビューである場合、どうすれば取得できますか? 積み上げられた画像の問題を解決するにはどうすればよいですか? それらを動的に「固定」として設定するか、スクロールするたびに位置を再計算するposition:absolute必要がありますか? この 1 秒間は、固定点と比較して各要素の位置を取得する必要があります ($(window).scrollTop()これまでのところ、スクロール中は常に 0 になると思います)が、方法がわかりません。

ああ、スクロールをバインドするために jQueryscroll()メソッドを使用しています。これは、目的のスライドにジャンプできるナビゲーション リストもあるからです。

これを明確にしていただければ幸いです。画像は常に中央に配置する必要があり、スライドをスクロールするとそれらが隠れる必要があり、画像が覆われている間は次のものが表示され、その場所に配置される必要があるため、方法を理解する必要があります。現在の要素の位置を取得し、<li>それがウィンドウの途中にある場合など、それに応じて前の画像を設定します。

4

2 に答える 2

5

そのタイプの Web サイトでは、視差効果を使用して背景画像を移動しています。

jparallaxなどのjQuery Parallax プラグインの使用を検討してください。

ただし、Web ページ全体については、提供した例に基づいたデモ ページがあるjQuery Parallax Pluginを使用することをお勧めします。そのデモページもチュートリアルです！

さらなるアイデアを提供できるウェブサイトもたくさんあり、ウェブページの中を見ると、彼らが使用している視差プラグインのタイプを見つけることができます.

編集:使用する優れたツールが Firefox ブラウザーに組み込まれているため、レイヤー化された 3D 構造で任意の Web ページを表示できます。これは、その Web サイトがレイヤード バックグラウンドとどのように相互作用しているかを把握するのに役立ちます。Firefox 3D ビュー の詳細については、こちらをご覧ください。

編集 2:これは役に立つかもしれません: DOM 要素が現在のビューポートに表示されているかどうかを確認する方法は?

また、あなたが提供したウェブサイトの例では、画像がビューにスクロールされたときに画像をビューポートの中央に配置するために使用している方法は、 style.cssファイルで確認できます。もちろん、これらの要素を変更する jQuery がありますが、スタイルは理にかなっています。

#main ul.bg li img.gif { position: absolute; z-index: 1; width: 996px; height: 800px; left: 50%; right: 50%; top: 50%; bottom: 50%; margin: -400px -498px; }



編集 3:これは、リンクされた例と同じことを行うjQuery Parallax Pluginであり、非常に強力な API を備えています。この特定のプラグインには、カスタム オフセットを使用したレイヤーごとの配置があります。

そのプラグインを使った、画面中央にモノが並ぶサイトです。
この他のWebサイトは、対話するレイヤーを選択するときに、このプラグインに問題がないことを示しています。

そのプラグインの名前はStellar.jsで、gitHub ページはHEREです。そこのホームページにアクセスすると、水平方向にスクロールします...ブラウザのビューポートの端に並ぶ視差効果である星のEASYという単語に注意してください。スクロールすると、他のキーワードを表示するために、一般的な領域にいるときに他の星が自動スクロールします。

于 2012-06-10T09:06:47.097 に答える
-1

HTML の進化を見ると、div#container には大きな高さ (li の数 * li の高さ) があり、li には display:none/block、overflow:hidden、および 0 とウィンドウの高さの間の高さがあります。

于 2012-06-10T09:14:50.350 に答える