使用HTML、CSS和JavaScript创建滚动弹幕效果

news2024/11/24 12:58:11

使用HTML、CSS和JavaScript创建滚动弹幕效果

在现代网页设计中，滚动文本是一种常见的动态效果，可以吸引用户的注意力并增强交互体验。在这篇博客文章中，我们将详细介绍如何使用HTML、CSS和JavaScript实现滚动文本效果。

效果

在这里插入图片描述

步骤1：设置HTML结构

我们首先需要创建一个基本的HTML结构，包含多个滚动的文本框。以下是示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.CSS">
</head>
<body>
    <div class="container">
        <div class="box">
            <span>HTML</span>
            <span>CSS</span>
            <span>JS</span>
            <span>JavaWeb</span>
            <span>MySQL</span>
            <span>Java</span>
            <span>Python数学建模</span>
            <span>C语言</span>
        </div>
        <div class="box">
            <span>HTML</span>
            <span>CSS</span>
            <span>JS</span>
            <span>JavaWeb</span>
            <span>MySQL</span>
            <span>Java</span>
            <span>Python数学建模</span>
            <span>C语言</span>
        </div>
        <div class="box">
            <span>HTML</span>
            <span>CSS</span>
            <span>JS</span>
            <span>JavaWeb</span>
            <span>MySQL</span>
            <span>Java</span>
            <span>Python数学建模</span>
            <span>C语言</span>
        </div>
    </div>
    <script src="index.JS"></script>
</body>
</html>

代码解析

<div class="container">：这个容器将包含所有的滚动文本框。
<div class="box">：每个box类的div包含了一组要滚动的文本。

步骤2：添加CSS样式

接下来，我们为文本框和容器添加样式，以确保它们的外观和行为符合预期。以下是CSS代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: '江城律动黑';
    font-size: 16px;
}

.container {
    position: relative;
    display: flex;
    width: 700px;
    height: 150px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, red 20%, red 80%, transparent);
    background-color: aqua;
    cursor: pointer;
}

.container div {
    position: absolute;
    width: 700px;
    white-space: nowrap;
    left: 0;
}

.container div:nth-of-type(1) {
    top: 20px;
}

.container div:nth-of-type(2) {
    top: 60px;
}

.container div:nth-of-type(3) {
    top: 100px;
}

.container span {
    display: inline-block;
    white-space: nowrap;
    letter-spacing: .2em;
    padding: 5px 10px;
    margin: 0 10px;
    background-color: white;
    border-radius: 10px;
}

样式解析

基本样式：重置了默认的边距和填充，以避免浏览器差异。
.container：设置为相对定位，使其中的文本框可以绝对定位。使用mask-image创建一个渐变遮罩，增加视觉效果。
.box：每个文本框的位置通过绝对定位来设置，便于实现动画效果。
.span：文本元素的样式，包括背景色和边角圆润效果。

步骤3：实现JavaScript功能

最后，我们将使用JavaScript为文本框添加移动效果。以下是JavaScript代码：

const boxElements = document.getElementsByClassName("box");
const box_1 = boxElements[0];
const box_2 = boxElements[1];
const box_3 = boxElements[2];

function moveBox(element) {
    // 移动到左侧
    element.style.left = "-130%";
    // 设置过渡效果
    element.style.transition = "left 5s";

    // 等待一段时间后，移动到右侧
    setTimeout(() => {
        element.style.left = "120%";
        // 移除过渡效果
        element.style.transition = "left 0s";
        // 再次调用函数形成循环
        setTimeout(() => moveBox(element), 200);
    }, 4500);
}

// 分别调用moveBox函数，设置不同的延迟时间
setTimeout(() => moveBox(box_1), 2000);
setTimeout(() => moveBox(box_2), 3700);
setTimeout(() => moveBox(box_3), 4800);