使用 HTML、CSS 和 JavaScript 实现滚动触发的小球弹出和切换 Banner 动画

在这篇文章中，我们将通过 HTML、CSS 和 JavaScript 创建一个页面滚动触发的小球弹出动画，并在点击小球后切换不同的 banner 页面。这篇文章适合刚入门的开发者，我们将一步步讲解实现的过程。

前置知识

在开始之前，你需要了解一些基础的 HTML、CSS 和 JavaScript 知识。了解这些内容后，你将能够轻松跟随本教程并实现这个有趣的动画效果。如下：
在这里插入图片描述

第一步：创建基本的 HTML 结构

首先，我们需要创建一个基本的 HTML 文件结构。在这个文件中，我们将包含一个滚动区域和一个固定的小球容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Triggered Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <div class="scroll-area">
            <p>Scroll down to see the animation...</p>
            <div class="spacer"></div>
        </div>
        <div class="container" id="container">
            <div class="dot" id="dot"></div>
            <div class="expanded" id