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

はじめに

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

👀 プレビュー

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

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

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

1. プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

2. この構造では：

   • index.html はメインページです。
   • css はスタイルファイル用のフォルダです。
   • images は画像リソース用のフォルダです。
   • js/index.js は完成させる必要のある JS ファイルです。
   • js/jquery-3.6.0.min.js は jQuery ライブラリファイルです。

3. WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

4. 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);
}

2. 解説：

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

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

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

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

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

まとめ

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