ホームページ  >  記事  >  ウェブフロントエンド  >  GitHub はどのようにしてシームレスなページ ナビゲーションを実現していますか? AJAX または CSS/JS トリック?

GitHub はどのようにしてシームレスなページ ナビゲーションを実現していますか? AJAX または CSS/JS トリック?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-14 15:45:02868ブラウズ

How does GitHub achieve its seamless page navigation: AJAX or a CSS/JS trick?

Github のシームレスなページ ナビゲーション: AJAX か?

https://github.com/ などの GitHub 上のプロジェクトを探索しているときinsoshi/insoshi を使用すると、フォルダーをクリックしたときにスムーズに遷移することに気付いたかもしれません。フォルダーがスライドして開き、同時に URL が変更されるこの動作では、「これは AJAX または他の技術によって実現されているのでしょうか?

答え: AJAX が動作しています

見た目に反して、このエフェクトは実際に AJAX に基づいています。このタイプのスライド メニューは、もともと iPod のブラウジング インターフェイスで採用されていました。 CSS/JS を使用して同様の効果を作成する試みがあった可能性がありますが、GitHub で使用されているアプローチは非同期 JavaScript と XML に依存しています。

AJAX リクエストを視覚化するには、Firefox の Firebug ツールを使用できます。ネットワーク監視を有効にすると、ディレクトリ リストを取得するリクエストが行われることがわかります。

トランジション効果: 所定の位置にスライド

フォルダー ナビゲーション中に観察されるトランジション効果が実現されます。 JavaScript ベースのスライド アニメーションを通じて。この手法には、不透明度や表示などの CSS プロパティを操作して、現在のページとターゲット ページの間でスムーズな遷移を作成することが含まれます。

以上がGitHub はどのようにしてシームレスなページ ナビゲーションを実現していますか? AJAX または CSS/JS トリック?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。