如何在 html、css 和 javascript 上使用文本（如 ASCII 艺术）制作动画 [关闭]

Question

在网上闲逛时，我发现这个动画是 MidJourney 网站的背景，几行文字逐渐变成一个漩涡：

https://www.midjourney.com/home/?callbackUrl=%2Fapp%2F

我正在尝试在我的投资组合网站上复制相同类型的动画，关于如何制作此类动画的任何想法、技巧或教程？

试图查看网站代码，但没有找到任何可以帮助我重现它的东西。

Answer 1

审查：我查看了您链接的网站，它们有多个文本行填满了整个屏幕，它们不断地进行操作。

如何实现动画：选择所有文本行JavaScript并使用 innerHTML 精确修改 DOM。您需要接收随机字符和恰恰修改 DOM 以实现计划好的动画效果。

动画：设置一个时间间隔来调用您的 DOM 修改函数并添加一些逻辑来制作更复杂的动画。

例子：这是我创建的一个简单示例，动画由1排我们将内容向左和向右移动。

外部游乐场：https://jsfiddle.net/cjkaqstg/49/

CSS：

text{
  font-size:16px;
  white-space:pre;
}

HTML:

<text id="text-0"></text>

记者：

const text_element = document.getElementById("text-0");
const text_length = 30;
var shift_left = true;

function receiveRandomCharacter()
{
    // Receive a random character
    const characters ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

  return characters[Math.floor(Math.random() * characters.length-1) +1];;
}
function modifyText(new_content)
{
    // Function to modify the text content
    text_element.innerHTML = new_content;   
}
function textAnimation()
{ 
  // Add some logic, in this case we will shift the characters to the left and right
  var row_content ="";
    if(shift_left)
  {
    for(var x=0;x<text_length;x++)
    {
        if(x % 2==0)
      {
        // Even Number, add SPACE as a character
        row_content += "  ";
      }
      else
      {
        // Un-even number, add a random character
        row_content += receiveRandomCharacter();
      }
    }
    modifyText(row_content);
    shift_left = false;
  }
  else
  {
    for(var x=0;x<text_length;x++)
      {
        if(x % 2 ==0)
        {
          // Even Number, add a random character
          row_content += receiveRandomCharacter();
        }
        else
        {
          // Un-even number, add SPACE as a character
          row_content += "  ";
        }
      }
      modifyText(row_content);
      shift_left = true;
    }
    console.log(row_content);
}
const interval = setInterval(function() {
    // Call a function every X milliseconds
   textAnimation();
 }, 300);