Midjourney 等网站的 ASCII 动画

Question

我浏览了 Midjourney 网站，并爱上了 ASCII 动画。

我浏览了一些 reddit/stack Overflow 帖子，但找不到任何有用的答案。所以我想再问一下，有谁知道如何用 html/css/js 做到这一点吗？或者更好的是已经有一个有用的存储库/代码？

Answer 1

这是基本思想：

• 创建一个

  div

  并将其放在内容后面，就像背景一样。提示：使用

  position: fixed

  和

  z-index

• 查询div元素。每次刷新屏幕时，使用

  requestAnimationFrame

  更新 div 中的文本。像在终端中打印它一样计算 ASCII 帧

我为你编写了一些示例 JavaScript，可以执行一些奇怪的动画：

<div id="animation"></div>

let el = document.getElementById("animation")

let i = 0;

const update = () => {
  el.innerText = "\n".repeat(i % 5) + "_".repeat(i % 50) + "Hello"
  i += 1
  requestAnimationFrame(update, 50000)
}

requestAnimationFrame(update, 50000)