Javascrip实现文字跳动特效

2023年6月11日上午12:45 • JavaScript

实现文字跳动特效需要用到JavaScript中的定时器setInterval()，具体步骤如下：

创建一个div元素用来存放文字，设置其样式（如背景色、文字颜色、字体大小等）和文字内容。
将文字内容拆分为单个字符，并在其周围每个字符之间插入一个空格。
创建一个数组存储拆分后的字符，然后将数组中的每个元素用span标签进行封装，便于后续添加样式或进行单个字符操作。
将封装后的字符插入到div元素中。
使用JavaScript中的setInterval()来完成文字的动态效果，将每个字符的上、下、左、右四个方向的偏移量在一定时间内进行一定程度的变化。
当文本已经到达一定位置后，便需要停止setInterval()定时器，以达到动态效果的结束。

示例1：

<!doctype html>
<html>
  <head>
    <style>
      .text-container {
        font-size: 50px;
        color: #fff;
        background-color: #000;
        width: 500px;
        height: 50px;
        text-align: center;
        box-shadow: 0 0 10px #000;
      }
      .text-container span {
        display: inline-block;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="text-container"></div>
    <script>
      const textContainer = document.querySelector('.text-container');
      const text = 'JavaScript is Amazing!';
      const textArray = text.split('').map(char => `<span>${char === ' ' ? '&nbsp;' : char}</span>`);
      textContainer.innerHTML = textArray.join('');

      let offset = 0;
      setInterval(() => {
        const spanElements = textContainer.querySelectorAll('span');
        for (const span of spanElements) {
          span.style.top = `${Math.sin(offset)}px`;
          span.style.left = `${Math.cos(offset)}px`;
        }
        offset += 0.1;
      }, 50);
    </script>
  </body>
</html>

示例2：

<!doctype html>
<html>
  <head>
    <style>
      .text-container {
        font-size: 50px;
        color: #fff;
        background-color: #000;
        width: 500px;
        height: 50px;
        text-align: center;
        box-shadow: 0 0 10px #000;
      }
      .text-container span {
        display: inline-block;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="text-container"></div>
    <script>
      const textContainer = document.querySelector('.text-container');
      const text = 'Welcome to My Website!';
      const textArray = text.split('').map(char => `<span>${char === ' ' ? '&nbsp;' : char}</span>`);
      textContainer.innerHTML = textArray.join('');

      let timerID = setInterval(() => {
        const spanElements = textContainer.querySelectorAll('span');
        for (const span of spanElements) {
          const randomOffset = Math.random() * 10 - 5;
          span.style.top = `${randomOffset}px`;
          span.style.left = `${randomOffset}px`;
        }
      }, 1000);

      setTimeout(() => {
        clearInterval(timerID);
      }, 5000);
    </script>
  </body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascrip实现文字跳动特效 - Python技术站

Javascrip实现文字跳动特效

相关文章