一週前，我的一位朋友 Noah Kleij 聯絡我，希望建立一個網站，讓他可以免費分享他的化學和其他學科知識。諾亞擁有曼徹斯特大學普通化學和有機化學博士學位，他希望成為世界的積極榜樣。他決定在一個沒有任何廣告的網站上創建和發布教育內容。
這對我來說是一個絕佳的機會，因為我一直想創建一個教育網站，但缺乏專業知識來實現這一目標。我喜歡他的想法，並立即開始免費研究它，因為我想為他所從事的崇高事業做出有意義的貢獻。
最初，我考慮使用 React 作為框架，但很快意識到這可能沒有必要，因為他只想要一個基本的網站。我從一個簡單的概念和一個名字開始，這個名字是我從 ChatGPT 得到的——Neuron IQ，一個合適的選擇。
對於框架，我決定堅持使用基本的 HTML、CSS 和 JavaScript。我像專業開發人員一樣使用這些技術建構工具。雖然我可以使用 React，但使用純 HTML、CSS 和 JavaScript 讓我能夠理解路由器和其他功能是如何從頭開始設計的。有趣的是，我也沒有使用 Node.js，保持了專案的輕量級和簡單性。
我最欣賞的是他在設計網站的佈局和風格時給了我很大的創作自由。我真的很珍惜這個機會。雖然我不是專業的 UI/UX 設計師，但我已經開發了足夠的網站來了解設計和排版的基礎知識，是的，我選擇黑暗主題，因為，我不想讓自己癲癇發作。
背景故事很多，讓我們直接進入正文；
像任何優秀的項目一樣，我們從基礎開始。我啟動了 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>
頁腳包含一些我認為對於該網站至關重要的重要連結。
專案進行了三個小時，我們完成了頁面的基本 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 的網站上。
接下來，我繼續設計標題。一個好的標題可以創造或破壞第一印象。
<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;
}
這使用 Flexbox 將徽標左對齊，將導航連結右對齊。我還添加了最大寬度以實現響應能力和居中，確保它在大螢幕上不會拉伸太多。
對於標誌，我使用了獨特的字體顏色來提高品牌識別度：
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;
}
風格標準且乾淨，但我始終追求簡單而不是使用過於複雜的設計。我刪除了預設的列表樣式，使用 Flexbox 水平顯示鏈接，在每個鏈接之間添加了間距以及漂亮的懸停效果。
為了讓整個網站的間距保持一致，我設計了該部分的樣式：
.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>
這將創建另一個響應式網格，確保主題以有組織的方式顯示，並帶有微妙的淡入動畫。我使用 Flexbox 來對齊圖像和文本，並添加了填充和間距以及懸停效果。
現在是推薦部分，輪播。
<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;
}
這可以確保網站在較小的裝置上看起來不錯，調整導航和網格佈局。
最後，我添加了主題和關於頁面的樣式，使它們盡可能簡單，因為網站的目標是推廣諾亞的知識。因此，設計盡可能保持最小。
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 的造型就完成了，花了大約六個小時才得到我想要的一切。現在，是時候深入研究這個難題的最後一塊了：JavaScript。
在轉向 JS 之前，讓我們看看我們的網站現在的樣子：
或者，如果您想查看即時預覽，請點擊這裡：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;
}
我遵循了與之前類似的結構，觀察並向這些卡片添加淡入類，然後不觀察它。
這就是事情變得棘手的地方。經過測試，我意識到滾動動畫並不一致。有時，動畫會過早觸發，有時，它們根本不會觸發，有時，它們只會在頁面上閃爍。真是一團糟。
我花了接下來的兩個小時深入研究程式碼，嘗試不同的閾值，甚至嘗試不同的方法來觸發動畫。我很沮喪，因為無論我做什麼，這些部分都會隨機動畫。
最初，我認為閾值設定不正確，因為它太低了，即使用戶沒有滾動到元素，觀察者也會看到它。所以，我認為 0.2 閾值似乎適合所有元素。嗯，顯然不是；有些元素需要其他數字。
我嘗試記錄每一個步驟，檢查瀏覽器的開發者控制台，甚至用 Google 搜尋我遇到的每一個可能的錯誤訊息（Stack Overflow 成為了我這段時間最好的朋友）。事實證明，我在多個元素上設定每個觀察者只有一個閾值，而對於某些元素，這不起作用。這就是為什麼它會閃爍、隨機動畫或根本不動畫。
我的做法顯然是錯的，我必須調整。我最終花了大約 2 個小時來調試這個爛攤子。最終，我重寫了觀察者以獲得特定的目標閾值。更改後，動畫終於按預期工作了。
我必須修改每個handleIntersection函數才能接收正確的閾值，並且修復了它。
經過 3 個小時的 JavaScript 編碼和 2 個小時的調試，我終於完成了這個專案的編碼！
以上是我從頭開始建立終極教育網站 — 第一天的詳細內容。更多資訊請關注PHP中文網其他相關文章！
