如何解决简历网站文本动画无法显示及$未定义的报错问题？

这个错误的核心原因是：你的代码使用了jQuery专属的$语法，但你的项目没有引入jQuery库——Codepen的示例默认配置了jQuery依赖，所以在Codepen里能正常运行，放到自己的本地文件中就会触发未定义错误。

方案一：引入jQuery库 #

在HTML文件中，加载main.js的<script>标签之前，添加jQuery的引入代码（推荐用CDN，也可以下载本地文件引入）：

<!-- 先引入jQuery，再加载你的业务脚本 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="main.js"></script>

方案二：改用原生JavaScript（无需依赖jQuery） #

如果不想引入额外的库，直接把代码改成原生JS实现，替换你的main.js内容如下：

var words = ['Welcome to my CV'],
    part,
    i = 0,
    offset = 0,
    len = words.length,
    forwards = true,
    skip_count = 0,
    skip_delay = 15,
    speed = 70;
var wordflick = function () {
  setInterval(function () {
    if (forwards) {
      if (offset >= words[i].length) {
        ++skip_count;
        if (skip_count == skip_delay) {
          forwards = false;
          skip_count = 0;
        }
      }
    }
    else {
      if (offset == 0) {
        forwards = true;
        i++;
        offset = 0;
        if (i >= len) {
          i = 0;
        }
      }
    }
    part = words[i].substr(0, offset);
    if (skip_count == 0) {
      if (forwards) {
        offset++;
      }
      else {
        offset--;
      }
    }
    // 替换jQuery的文本设置逻辑为原生JS
    document.querySelector('.word').textContent = part;
  },speed);
};

// 替换jQuery的DOM就绪事件为原生事件监听
document.addEventListener('DOMContentLoaded', function () {
  wordflick();
});

额外优化建议 #

你可以给welcome-container加上样式，让动画文本居中且字体足够醒目：

.welcome-container {
    text-align: center;
    font-size: 100px;
}

内容的提问来源于stack exchange，提问作者alessi.gg