js实现文字滚动的效果

2023年6月11日上午2:02 • JavaScript

JS实现文字滚动的效果，通常可以通过CSS和JS两种方式来实现。下面将详细介绍一下这两种实现方式。

CSS实现文字滚动

1. 使用CSS动画实现文字滚动

可以通过CSS的@keyframes关键字加上animation属性来实现文字滚动的效果。具体步骤如下：

在CSS中创建一个动画实现文字滚动的效果。

  @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-100%); }
  }

创建一个包含文本内容的元素，用于显示滚动的文本。

  <div class="scroll-text">
    Here is a long text that needs to scroll horizontally.
  </div>

在元素中添加CSS样式，指定宽度和高度，并启用动画效果。

  .scroll-text {
    width: 100%;
    height: 50px; /* 定义元素高度 */
    white-space: nowrap; /* 设置内容不换行 */
    overflow: hidden; /* 开启溢出隐藏 */
    animation: scroll 10s linear infinite; /* 设置动画 */
  }

这里设置了10秒钟的滚动动画效果，并让动画无限循环滚动。

2. 使用CSS marquee标签实现文字滚动

CSS也提供了marquee标签，可以很方便地实现文字滚动的效果。

使用marquee标签包裹需要滚动的文本。

  <marquee>Here is a long text that needs to scroll horizontally.</marquee>

可以添加一些属性配置文本的滚动方向和速度（可选属性）。

  <marquee behavior="scroll" direction="left" scrollamount="10">
    Here is a long text that needs to scroll horizontally.
  </marquee>

behavior属性用于设置滚动方式，direction属性用于设置滚动方向，scrollamount属性用于设置滚动速度。

JS实现文字滚动

除了CSS实现文字滚动的方式，JS也可以通过更加灵活的方式来实现文字滚动效果。以下是两种常见的JS实现方式。

1. 使用JS动画实现文字滚动

通过设置元素的定位来实现文字滚动的效果。步骤如下：

创建一个包含文本内容的元素，用于显示滚动的文本。

  <div class="scroll-text">
    Here is a long text that needs to scroll horizontally.
  </div>

在JS中定义一个滚动函数，使用定时器来实现文字的滚动效果。

  function scrollText() {
    var scrollEle = document.querySelector('.scroll-text');
    var scrolledWidth = parseInt(scrollEle.style.left) || 0;
    if (scrolledWidth < -scrollEle.clientWidth) {
      scrolledWidth = window.innerWidth;
    } else {
      scrolledWidth--;
    }
    scrollEle.style.left = scrolledWidth + 'px';
    requestAnimationFrame(scrollText);
  }
  scrollText();

此处将元素的定位left值不断减小，从而实现文字的滚动效果。

2. 使用JS和CSS动画结合实现文字滚动

这种方法结合了CSS和JS两种技术，使用CSS实现平滑的动画效果，使用JS控制DOM元素。步骤如下：

创建一个包含文本内容的元素，用于显示滚动的文本。

  <div class="scroll-text">
    Here is a long text that needs to scroll horizontally.
  </div>

在CSS中通过transition和transform实现平滑的动画效果。

  .scroll-text {
    position: relative;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: transform 5s linear;
  }
  .scroll-text.show {
    transform: translateX(-100%);
  }

这里使用了transform配合transition实现从左往右平滑滚动的效果。

在JS中控制元素的类名来触发动画效果。

  function startScroll() {
    var scrollEle = document.querySelector('.scroll-text');
    if (scrollEle.classList.contains('show')) {
      scrollEle.classList.remove('show');
      void scrollEle.offsetWidth;
    }
    scrollEle.classList.add('show');
  }
  setInterval(startScroll, 5000);

这里使用定时器周期性启动滚动。当调用开始滚动函数时，控制元素的类名来启动CSS动画效果，将文本从左到右平滑滚动。同时，需要注意先移除类名再重新添加类名，使用void scrollEle.offsetWidth强制浏览器重新计算元素宽度，避免动画效果无法生效。