使用 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="expanded">
                <div class="button" data-target="banner1">1</div>
                <div class="button" data-target="banner2">2</div>
                <div class="button" data-target="banner3">3</div>
            </div>
        </div>
    </div>
    <div class="banners">
        <div class="banner" id="banner1">Banner 1</div>
        <div class="banner" id="banner2">Banner 2</div>
        <div class="banner" id="banner3">Banner 3</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

HTML 解释

我们创建了一个基本的 HTML 结构，包括一个滚动区域 (scroll-area) 和一个固定的小球容器 (container)。
小球容器包含一个小球 (dot) 和三个按钮 (button)，每个按钮都有一个 data-target 属性，用于指向对应的 banner。
我们还添加了一个 banners 容器，用于包含所有的 banner 页面，每个 banner 都有一个唯一的 ID。

效果如下：

在这里插入图片描述

第二步：添加 CSS 样式

接下来，我们需要为我们的 HTML 元素添加样式。我们将使用 CSS 使小球隐藏，并在滚动时显示和展开。此外，我们还会为 banner 页面添加样式。

/* styles.css */
body {
    margin: 0;
    height: 200vh; /* 确保有足够的高度来滚动 */
    background: #f3f4f6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.content {
    position: relative;
}

.scroll-area {
    height: 150vh;
}

.spacer {
    height: 100vh; /* 根据需要调整触发动画的位置 */
}

.container {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s;
    opacity: 0; /* 初始状态隐藏 */
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 50%;
    transition: width 0.3s, height 0.3s, background-color 0.3s;
}

.expanded {
    display: flex;
    gap: 5px;
    overflow: hidden;
    width: 0;
    transition: width 0.3s;
}

.expanded .button {
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 50%;
    cursor: pointer;
}

.banners {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* 初始状态隐藏 */
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 2em;
    transition: opacity 0.3s;
}

.banner {
    display: none; /* 初始状态隐藏 */
}

.banner.active {
    display: block;
}

.banners.active {
    display: flex;
}

CSS 解释

body 和 .content 设置了页面的基本布局和高度，以确保有足够的高度进行滚动。
.container 设置了小球容器的位置和初始状态为隐藏。
.dot 和 .expanded 设置了小球和展开状态的样式，包括过渡效果。
.banners 和 .banner 设置了 banner 页面的样式和显示状态，通过添加 active 类来控制显示和隐藏。

效果如下：

在这里插入图片描述

第三步：添加 JavaScript 交互

最后，我们需要添加 JavaScript 来处理滚动事件和点击事件。我们将通过 JavaScript 来检测滚动位置，当页面滚动到一定距离时，显示和展开小球。同时，我们还会添加点击事件来切换 banner 页面。

// script.js
window.addEventListener('scroll', () => {
    const container = document.getElementById('container');
    const dot = document.getElementById('dot');
    const expanded = document.getElementById('expanded');

    if (window.scrollY > 200) { // 根据需要调整触发动画的位置
        container.style.opacity = 1;
        expanded.style.width = '50px'; // 根据需要调整这个值
        dot.style.width = '0px';
        dot.style.height = '0px';
        dot.style.backgroundColor = 'transparent';
    } else {
        container.style.opacity = 0;
        expanded.style.width = '0px';
        dot.style.width = '10px';
        dot.style.height = '10px';
        dot.style.backgroundColor = '#000';
    }
});

document.querySelectorAll('.button').forEach(button => {
    button.addEventListener('click', () => {
        const target = button.getAttribute('data-target');
        document.querySelectorAll('.banner').forEach(banner => {
            banner.classList.remove('active');
        });
        document.getElementById(target).classList.add('active');
        document.querySelector('.banners').classList.add('active');
    });
});

// 点击banner外部区域时关闭banner
document.querySelector('.banners').addEventListener('click', (e) => {
    if (e.target.classList.contains('banners')) {
        document.querySelector('.banners').classList.remove('active');
        document.querySelectorAll('.banner').forEach(banner => {
            banner.classList.remove('active');
        });
    }
});

解释

我们通过 window.addEventListener('scroll', ...) 监听滚动事件，当页面滚动到一定距离时，显示和展开小球。
我们为每个按钮添加了点击事件监听，通过 button.addEventListener('click', ...) 切换对应的 banner 页面。
最后，我们添加了一个点击事件监听，当点击 banner 页面外部区域时，关闭 banner 页面。

最终效果

然后，我们就得到了这样的效果
在这里插入图片描述

结论

通过以上步骤，我们实现了一个滚动触发的小球弹出动画，并且可以点击小球切换不同的 banner 页面。这个简单的示例展示了如何结合 HTML、CSS 和 JavaScript 创建交互动画效果。希望这篇文章对刚入门的开发者有所帮助，鼓励大家尝试更多的动画效果，提升自己的前端技能。