教你实现网页中的文字滚动效果

创作时间:

作者:

@小白创作中心

教你实现网页中的文字滚动效果

引用

CSDN

https://m.blog.csdn.net/xn983621/article/details/142618022

在网页设计中，文字滚动效果是一种常见的视觉效果，可以用于吸引用户的注意力，展示动态信息或增强页面的交互性。无论是用于网站的标题、标语还是新闻列表，文字滚动效果都能为页面增添活力。本文将详细介绍如何使用CSS动画和JavaScript实现文字滚动效果，并提供相应的代码示例。

使用CSS动画实现文字滚动效果

1.1 创建HTML结构

首先，我们需要创建一个包含要滚动的文本的元素。例如：

<div class="scrolling-text">欢迎来到我的网站！</div>

1.2 编写CSS样式

接下来，我们可以使用CSS动画来控制滚动效果。以下是一个简单的例子：

.scrolling-text {
  white-space: nowrap; /* 确保文本不会换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  position: relative; /* 相对定位以便于内部元素移动 */
}

.scrolling-text span {
  display: inline-block; /* 使每个字符单独显示 */
  animation: scrolling 5s linear infinite; /* 定义滚动动画 */
}

@keyframes scrolling {
  0% { transform: translateX(100%); } /* 初始位置在右侧外部 */
  100% { transform: translateX(-100%); } /* 结束位置在左侧外部 */
}

1.3 添加滚动文本

为了实现多个文本同时滚动的效果，举个例子：我们可以将https://www.reoinc.cn/每个字符放入一个`span`标签中：

<div class="scrolling-text">
  <span>欢迎</span>
  <span>来到</span>
  <span>我的</span>
  <span>网站！</span>
</div>

1.4 调整动画速度和方向

通过修改CSS中的animation属性，可以调整滚动的速度和方向。例如，增加animation-duration的值可以使滚动更慢，而改变transform函数中的值可以改变滚动的方向。

使用JavaScript实现文字滚动效果

除了CSS动画，我们还可以使用JavaScript来实现文字滚动效果。这种方法提供了更多的灵活性和控制。

2.1 创建HTML结构

同样，我们需要一个包含要滚动的文本的元素：

<div id="scrolling-text">欢迎来到我的网站！</div>

2.2 编写JavaScript代码

下面是一个简单的JavaScript代码示例，用于实现文字滚动效果：

const textElement = document.getElementById('scrolling-text');
let textWidth = textElement.offsetWidth; // 获取文本宽度
let startPosition = 0; // 初始位置

function scrollText() {
  startPosition -= 1; // 每次滚动时向左移动一个像素
  if (startPosition + textWidth <= 0) {
    startPosition = textElement.parentElement.offsetWidth; // 如果文本完全移出屏幕，重置到右侧外部
  }
  textElement.style.transform = `translateX(${startPosition}px)`; // 更新文本位置
  requestAnimationFrame(scrollText); // 请求下一帧动画
}

scrollText(); // 开始滚动文本