1週間前、友人の一人、ノア・クレイジから、化学やその他の主題に関する知識を無料で共有できるウェブサイトを構築したいと相談を受けました。ノアはマンチェスター大学で一般化学と有機化学の博士号を取得しており、世界に対する前向きな模範となりたいと考えていました。彼は、広告なしで教育コンテンツを作成し、Web サイトに公開することにしました。
教育サイトを作成したいと常々思っていましたが、それを価値あるものにするための専門知識が不足していたので、これは私にとって素晴らしい機会でした。私は彼のアイデアが大好きで、彼が取り組んだ崇高な目的に有意義に貢献したかったので、すぐに無料で取り組み始めました。
当初、私は React をフレームワークとして使用することを検討しましたが、彼は基本的な Web サイトだけを望んでいたため、それは必要ないかもしれないとすぐに気づきました。私はシンプルなコンセプトと名前から始めました。これは ChatGPT から得た、Neuron IQ というぴったりの選択です。
フレームワークについては、基本的な HTML、CSS、JavaScript を使用することにしました。私はプロの開発者のように、これらのテクノロジーを使用してツールを作成しました。 React を使用することもできましたが、プレーンな HTML、CSS、JavaScript を使用することで、ルーターやその他の機能がどのように作成されるかを一から理解することができました。興味深いことに、私は Node.js も使用せず、プロジェクトを軽量かつ簡単に保ちました。
私が最も感謝したのは、彼がサイトのレイアウトとスタイルのデザインにおいて創造的な自由をたくさん与えてくれたことです。この機会を本当に大切に思いました。私はプロの UI/UX デザイナーではありませんが、デザインとタイポグラフィの基本を理解するのに十分な Web サイトを開発しました。そう、ダークテーマを選択したのは、発作を起こしたくなかったからです。
裏話はたくさんあるので、すぐに内容に入りましょう;
他の優れたプロジェクトと同様に、私たちは基本から始めました。 VS Code を起動し、!ショートカット、私の基本的な HTML ボイラープレートをすぐに生成しました:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
この定型文のカスタム修正バージョンがあり、style.css と script.js がすでに含まれているため、手動で追加する手間が省けます。
私はタイトルの設定から始めました。これは SEO とブラウザーのタブでサイトがどのように表示されるかにとって重要です。 ChatGPT の助けを借りて私が決めたタイトルは、「Neuron IQ - 高品質の教育ノートと回答」
でした。次に、ヘッダーから始まるユーザー エクスペリエンスに焦点を当てました。明確でユーザーフレンドリーなナビゲーションは、優れたウェブサイトの鍵です。少なくとも、私はそう教えられてきました。
<header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>© 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
フッターには、サイトにとって不可欠だと思われる重要なリンクがいくつか含まれています。
プロジェクト開始から 3 時間で、ページの基本的な HTML 構造が完成しました。次の手順では、ページのスタイルを設定し、スクリプト ファイルを追加して、コンテンツを設定します。
私はページの基本的なスタイルを設定することから始めました。私はいつもボディから始めて、全体的なルックアンドフィールを確立します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
ここでは、フォントを「Poppins」に設定し、デフォルトのマージンとパディングを削除し、読みやすいように行の高さを調整し、テキストの色を明るいグレーに設定し、暗い背景を使用しました。私がダークテーマを選択したのは、誰も発作を起こさないようにするためと、特に学習と STEM に特化した Web サイトで見た目がクールだからです。
次に、ヘッダーのスタイルに進みました。優れたヘッダーは第一印象を左右する可能性があります。
<header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>© 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
濃い灰色の背景、パディング、微妙な影を追加し、その位置をスティッキーに設定して、ユーザーがスクロールするときにナビゲーションバーが常に上部に表示されるようにしました。これにより、ナビゲーション バーがユーザーをフォローしているような、継続的なナビゲーション エクスペリエンスが提供されます。
次に、ナビゲーション バー自体のスタイルを設定しました。
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
これは、フレックスボックスを使用して、ロゴを左側に、ナビゲーション リンクを右側に配置します。また、応答性とセンタリングのために max-width を追加し、大きな画面で伸びすぎないようにしました。
ロゴには、ブランドを認識できるように独自のフォントの色を使用しました。
header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
ナビゲーション リンク:
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
スタイルはスタンダードでクリーンですが、過度に複雑なデザインを使用するのではなく、常にシンプルさを目指しています。デフォルトのリストのスタイルを削除し、フレックスボックスを使用してリンクを水平に表示し、各リンク間にスペースを追加し、優れたホバー効果を追加しました。
サイト全体で一貫した間隔を保つために、セクションのスタイルを変更しました:
.logo {
font-size: 1.8rem;
font-weight: 600;
color: #64b5f6;
}
これにより、すべてのセクションの最大幅、余白、テキストの配置が同じになります。
ヒーローセクションに移りますが、注目を集める印象的なビジュアル要素が必要でした。
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
text-decoration: none;
color: #e0e0e0;
transition: color 0.3s;
}
nav ul li a:hover {
color: #64b5f6;
}
背景に線形グラデーションを使用して奥行きとモダンな雰囲気を出し、間隔を広げるためにパディングを追加しました。
section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
これにより、ヒーローのテキスト コンテンツが広がりすぎないようにスタイル設定され、水平方向の中央に配置され、ヒーロー セクションがロードされたときにスムーズなトランジション効果が得られます。
見出しと段落のスタイルはシンプルで標準的です:
.hero {
background: linear-gradient(135deg, #2c3e50, #1a237e);
padding: 80px 20px;
color: #e0e0e0;
}
最後にボタン:
.hero-content {
max-width: 700px;
margin: 0 auto;
opacity: 0; /* Start hidden */
transform: translateY(20px); /* Slight move down */
transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content {
opacity: 1;
transform: translateY(0); /* Move to original postition */
}
.hero-content h1, .hero-content p{
opacity:0;
transform: translateY(-20px);
transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content h1, .hero.loaded .hero-content p{
opacity: 1;
transform: translateY(0); /* Move to original postition */
}
.hero-content .btn{
opacity:0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content .btn{
opacity: 1;
transform: translateY(0); /* Move to original postition */
}
これにより、ボタンは視覚的に魅力的でインタラクティブになり、ホバーすると背景が変わります。
次に、イントロセクションのスタイルを設定する必要がありました。
.hero h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 25px;
}
これにより、グリッドを使用してイントロ セクションの応答性の高いグリッドが作成され、並べて配置され、各イントロ カードに微妙なフェードイン アニメーションが提供されます。
カテゴリセクションの場合:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
これにより、別の応答性の高いグリッドが作成され、微妙なフェードイン アニメーションを使用して主題が整理されて表示されます。フレックスボックスを使用して画像とテキストを配置し、パディングとスペース、ホバー効果を追加しました。
そして今度は紹介セクション、カルーセルです。
<header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>© 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
これは、視覚的にアピールするトランジション効果とスケール効果を備えた、推薦カルーセルの標準 CSS です。
最新のリソース セクションのスタイルを設定します。
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
ここでは、別のレスポンシブ グリッドを実装し、カードのスタイルを設定し、ホバー効果を追加し、フェードイン アニメーションを含めてこれらのカードに命を吹き込みました。
次に、行動喚起セクションの CTA:
header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
これは、ユーザーがサイトにさらに関与するためのシンプルで明確なセクションです。
スタイルを完成させるために、フッターに焦点を当てました:
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
これにより、フッターのスタイルが設定され、リンクのリストが含まれ、ホバー効果が設定されます。
次に、メディア クエリを使用してレスポンシブ デザインを追加しました。
.logo {
font-size: 1.8rem;
font-weight: 600;
color: #64b5f6;
}
これにより、ナビゲーションとグリッド レイアウトが調整され、サイトが小型のデバイスでも適切に表示されるようになります。
最後に、この Web サイトの目的はノアの知識を促進することであるため、件名とページについてのスタイルを追加し、それらをできるだけ最小限に抑えます。そのため、デザインは可能な限り最小限に抑えられています。
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
text-decoration: none;
color: #e0e0e0;
transition: color 0.3s;
}
nav ul li a:hover {
color: #64b5f6;
}
これらのスタイルは同じテーマに従っており、特定のページ要素を反映するために小さな変更が加えられ、すべてのページで一貫した外観が作成されます。
これで Neuron IQ のスタイリングが完了しました。すべてを希望どおりに配置するのに約 6 時間かかりました。ここで、パズルの最後のピースである JavaScript に取り掛かります。
JS に移行する前に、現在の Web サイトの外観を確認してみましょう:
または、ライブプレビューを見たい場合は、ここにあります: NeuronIQ
この部分は、正直に言うと、私の忍耐力を少し試しました。つまり、簡単にいかないことは分かっていましたが、それでも…
私はウェブサイトを単なる静的なページではなく、生きていると感じさせることを目標として始めました。まず、ヒーロー セクションのアニメーションを設定しました。
section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
これは簡単です。DOM が完全にロードされたら、ヒーロー セクションのアニメーションをトリガーするクラスを追加すると、計画どおりにスムーズにアニメーション化されます。
次に、セクションがビューポートにスクロールするときにアニメーションを追加することを目指しました。このために、IntersectionObserver API を使用しました。この部分は少し難しかったです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
このコードは、.intro-grid div 要素のオブザーバーを設定します。オブザーバーがビューに表示されると、フェードイン クラスを追加してアニメーションをトリガーし、オブザーバーは不要になったので削除します。
カテゴリセクションでも同じことを行いました:
<header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>© 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
カテゴリーセクションにも同じ構造を使用し、非常に基本的な遅延を追加しました。まだ多くの改良が必要でした。
次に、紹介カルーセルの実装に移りました。
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
これはスライダーのかなり標準的なセットアップです。スライダーを更新し、動きを制御し、スライド間に 5 秒の遅延を設けて自動スライドを設定する機能を追加しました。
最後に、最新のリソースセクションにスクロール効果を実装しました。
header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
私は以前と同様の構造に従い、これらのカードにフェードイン クラスを観察して追加し、観察を解除しました。
ここで問題が発生しました。テスト後、スクロール アニメーションが一貫して動作していないことがわかりました。アニメーションのトリガーが早すぎる場合もあれば、まったくトリガーされない場合もあれば、ページ上でちらつくだけの場合もあります。めちゃくちゃでした
私は次の 2 時間をかけてコードを徹底的に調べ、しきい値のさまざまな値を試したり、アニメーションをトリガーするさまざまな方法を試したりしました。何をしてもセクションがランダムにアニメーションし続けるため、イライラしていました。
最初は、しきい値が低すぎるため、しきい値が正しく設定されておらず、ユーザーがスクロールしていなくても要素がオブザーバーに表示されてしまうのではないかと思いました。したがって、すべての要素に対して 0.2 のしきい値が適切であると考えました。まあ、どうやら違うようです。一部の要素には別の番号が必要です。
私はすべてのステップをログに記録し、ブラウザの開発者コンソールを検査し、遭遇した可能性のあるすべてのエラー メッセージを Google で検索しました (この間、Stack Overflow が私の親友になりました)。結局、複数の要素に対して各オブザーバーを 1 つのしきい値だけで設定していましたが、一部の要素ではそれが機能しませんでした。そのため、ちらついたり、ランダムにアニメーションしたり、まったくアニメーションしなかったりすることがあります。
私のアプローチは明らかに間違っていたので、修正する必要がありました。結局、この混乱のデバッグに約 2 時間を費やしました。最終的に、特定のターゲットしきい値を取得するためにオブザーバーを書き直しました。変更後、ようやくアニメーションが期待通りに動作するようになりました。
適切なしきい値を受け取るために各 handleIntersection 関数を変更する必要がありましたが、これで問題は修正されました。
3 時間の JavaScript コーディングと 2 時間のデバッグを経て、ついにこのプロジェクトのコーディングが完了しました。
以上がULTIMATE 教育 Web サイトを一から構築しました — 1 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
