jquery - この効果はどのように達成されますか? HTML/CSS/jQuery

Question

そして、「インストール」、「チューニング」、「FAQ」、「バージョン情報」などのメニューボタンをクリックします。ページ全体をリロードしなくても、各ページ間がうまく遷移していることに気付くでしょう。

私はウェブ開発を始めたばかりで、同様の効果を達成したいと考えています。

彼がどのようにそれを行っているかについての私の推測は次のとおりです。

そのコンテンツを含む iFrame、ボタンは各 iFrame の読み込みをトリガーします。各 iFrame のトップレベル<div>には、-webkit-または-moz-アニメーションが含まれています。
コンテンツ全体が div にあり、各ボタンは単純に前の div をフェードアウトし、CSS アニメーションで次の div をフェードインします。

皆さんがそれがどのように行われるかを知らない限り、私はこれらの両方を試します.

1と2のうち、どちらがより魅力的な選択ですか?

score 1 · Accepted Answer

これは target と呼ばれる疑似セレクターを使用し、リンクは #pagename を URL に追加し、そこから適切なアニメーションが発生します。

HTML は次のようになります。

<p id='pagename'>This is some text</p>

リンクは次のようになります。

<a href='#pagename'>This link goes to pagename</a>

そして、CSS で次のように定義できます。

#pagename:target {
    font-weight: bold;
}

これにより、リンクをクリックしたときに #pagename 内のテキストが太字になります。ここから、アニメーションを含めるように拡張できます。たとえば、すべての div の不透明度を 0 にし、左の位置を 50px; にします。

そして、div がターゲットにされるたびに、不透明度を 1 にアニメーション化し、左を 0px にアニメーション化します。

編集:これは、あなたが目指している正確な効果をエミュレートする、私が作り上げた簡単な例です: http://jcolicchio.latestdot.net/test_target.html#page1

score 0 · Accepted Answer

ほとんどの場合、トランジションに JQuery を使用しています。

score 0 · Accepted Answer

firebug を使用して Web ページを調べると、このjQuery ファイルに魔法のすべて (または少なくともその一部) が含まれていることがわかります。

すべての詳細は見ていませんが、純粋な jQuery と CSS でこの効果を実現できると思います。

あなたの幸運を祈ります！

3 に答える 3