一周前，我的一位朋友 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中文网其他相关文章！
