マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

この記事では、マウスフリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期待して、傾斜したマウスフリップナビゲーションの制作を例として分析します。
一昨日、オンライン上の友人からページが送られてきて、マウスのロールオーバーができない理由を解明するのを手伝ってほしいと頼まれました。ソースファイルを開いて確認したところ、作成者はマウスロールオーバー機能すら持っていないことがわかりました。また、傾斜ナビゲーションについては十分に考慮されていませんでした。当時私はこれらの問題に気づいていましたが、プロジェクトを終えようとしていたため、彼女に説明する時間がありませんでした。昨日仕事を終えて、今ファイルを取り出して見てみたところ、この事件を通して多くの知識ポイントを説明できることが分かりました。いくつかの箇所は簡単に無視されがちですが、実際には非常に重要な箇所です。

まず、実現したい効果について考えてみましょう。もちろん、実際に実現する前には、これらは頭の中やスケッチの中にしか存在しません。まず、それがどのように見えるかを考え、それから望ましい効果を達成する方法を分析する必要があります。さっそく、まずは画像を見てみましょう。

上の写真を見ると、何でもないことのように思えるかもしれませんし、簡単にできそうに思えるかもしれません。さて、この効果を詳しく分析してみましょう。標準実装を使用すると、画像を HTML に直接挿入することはできません。標準的な方法で行うには、CSS を使用して画像を背景として呼び出す必要があります。それでは、このようなナビゲーションを直接呼び出せるかどうか確認してみましょう。何か問題はありますか? このナビゲーション効果の拡大画像をご覧ください。

上の図の「危険ゾーン」は非常に明白であることに注意してください。 2 つの傾斜した正のブロックを組み合わせると、必然的に繰り返し領域が発生します。現在の CSS では、特殊な形状の処理はサポートされていません。この問題を解決するには、2 つのブロックを重ねる必要があります。重複させるには、異なるレベルに配置する必要があります。これには、CSS での配置の使用が必要です: "position: static | absolute | fixed | relative"。
マウスのロールオーバーを行うには、通常、すべての背景を 1 つの画像にまとめ、CSS を使用して、異なるタグの下で画像のさまざまな位置を設定します。おそらく、このナビゲーションの背景画像は次のようにすべきだと考える人もいるでしょう。

本当にそう思うなら、問題が発生します。マウスを 5 つのブロックのいずれかに移動すると、上の危険ゾーンの繰り返し部分が左右のナビゲーションの角をブロックします。通常の方法は次のようになります:

この方法でのみ、危険ゾーンのない最終的な背景画像として使用できます。もちろん、背景が白ではなく透明であることにも注意する必要があります。主な目的は、Web サイトの背景と溶け込まないことです。危険ゾーンで隣接する背景をブロックしないようにすることが重要です。私は GIF 画像を使用しますが、GIF 画像が透明になると、多少の粗さが生じます。異なる色のウェブサイトの背景を扱う場合は、PNG を使用するか、GIF 画像の端をピクセル化するのが最適です。
この背景画像について考えた後、このナビゲーションをどのように作成するかを考える必要があります。まず、マウスのロールオーバーを分析してみましょう。元々、マウスのロールオーバーは JS によって行われていましたが、現在は CSS の :hover を使用して、より少ないコードと明確な構造でこの効果を実現できます。したがって、これら 5 つのナビゲーションの反転は、A:hover によって実現されます。

<<: MySQLデータのバックアップ方法の選択と考え方

>>: XHTML コードで Marquee タグを使用する方法