ポータル風の Web ページを実装する

jQueryjQueryBeginner
今すぐ練習

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

このプロジェクトでは、Web ページにポータルのような機能を実装する方法を学びます。ポータル機能により、ユーザーは長い Web ページ上で目的のコンテンツを迅速に見つけて移動できます。

👀 プレビュー

Portal functionality demonstration

🎯 タスク

このプロジェクトでは、以下を学びます。

  • プロジェクトファイルと構造を設定する方法
  • JavaScript と jQuery を使用してポータル機能を実装する方法
  • サイドボタンがユーザーのスクロール位置に基づいて色を変えるようにする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

  • Web 開発プロジェクトを構築して設定すること
  • JavaScript と jQuery を使用して DOM を操作し、ユーザーインタラクションを処理すること
  • 長い Web ページ上のユーザー体験を向上させるためのポータルのような機能を実装すること

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL jquery(("jQuery")) -.-> jquery/EventHandlingGroup(["Event Handling"]) jquery(("jQuery")) -.-> jquery/DOMManipulationGroup(["DOM Manipulation"]) jquery/EventHandlingGroup -.-> jquery/event_methods("Event Methods") jquery/EventHandlingGroup -.-> jquery/event_effects("Event Effects") jquery/DOMManipulationGroup -.-> jquery/dom_traversal("DOM Traversal") jquery/DOMManipulationGroup -.-> jquery/element_management("Element Creation and Removal") subgraph Lab Skills jquery/event_methods -.-> lab-445670{{"ポータル風の Web ページを実装する"}} jquery/event_effects -.-> lab-445670{{"ポータル風の Web ページを実装する"}} jquery/dom_traversal -.-> lab-445670{{"ポータル風の Web ページを実装する"}} jquery/element_management -.-> lab-445670{{"ポータル風の Web ページを実装する"}} end

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造を設定します。以下の手順に従ってこのステップを完了してください。

  1. プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。
├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js
  1. この構造では:

    • index.html はメインページです。
    • css はスタイルファイル用のフォルダです。
    • images は画像リソース用のフォルダです。
    • js/index.js は完成させる必要のある JS ファイルです。
    • js/jquery-3.6.0.min.js は jQuery ライブラリファイルです。
  2. WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

  3. VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

ポータル機能を実装する

このステップでは、js/index.js ファイルのコードを完成させて、ポータルの機能を実装します。

  1. js/index.js ファイルに以下のコードを追加します。
$(window).scroll(function () {
  // ページが指定された範囲までスクロールすると、対応するサイドボタンの色が変わります。
  let top = scrollY;
  $("#lift a").removeClass("active-color");
  if (top >= 0 && top < 960) {
    $("#lift a:nth-of-type(1)").addClass("active-color");
  } else if (top >= 960 && top <= 1920) {
    $("#lift a:nth-of-type(2)").addClass("active-color");
  } else {
    $("#lift a:nth-of-type(3)").addClass("active-color");
  }
});

function toFunction(scrollTopVal) {
  // ボタンをクリックすると、指定された位置までページがスクロールします。
  window.scrollTo(0, scrollTopVal);
}
  1. 解説:

    • $(window).scroll() 関数は、ページのスクロール位置を検出するために使用されます。
    • ページが指定された範囲までスクロールすると、対応するサイドボタンにアクティブなスタイル(.active-color)が与えられ、他のボタンのスタイルはデフォルト(.default-color)に設定されます。
    • toFunction() 関数は、ユーザーがサイドボタンをクリックしたときに、ページを指定された位置までスクロールさせるために使用されます。

ポータル機能をテストする

  1. ブラウザに戻り、ページを更新します。
  2. ページの側面にある 上部、中央、または下部 のボタンをクリックし、ページが対応する範囲までスクロールすることを確認します。
  3. ページが指定された範囲までスクロールすると、対応するサイドボタンにアクティブなスタイル(.active-color)が与えられていることを確認します。

最終結果は以下に示されています。

Portal functionality demonstration

おめでとうございます!あなたはプロジェクトにおいてポータル機能を成功裏に実装しました。

✨ 解答を確認して練習

まとめ

おめでとうございます!このプロジェクトを完了しました。あなたは実験(Lab)をもっとたくさん練習することができ、あなたの技術を向上させることができます。