页面加载时随机文本打字机效果实现问题求助

问题描述 #

我正尝试实现页面加载时展示4条随机字符串中的一条的打字机效果。目前其他功能均正常，但打字机效果无法实现。我试过Typed.js、typewriter等多种方法，但都不起作用。我推测CSS动画的steps选项也无法适用，因为字符串是随机的，字符数量不固定。

当前代码 #

HTML #

<body>
        <div class="loader">
            <div class="loader-content">
                <div class="loader-overlay"></div>
                <img class="loader-img" src="http://test.citralstudios.com/wp-content/uploads/2023/07/logo-wit-web.png" alt="Citral Studios logo">
                <div class="loader-random-quote" id="element"></div>
            </div>
        </div>
<script
  src="https://code.jquery.com/jquery-3.7.0.min.js"
  integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
  crossorigin="anonymous"></script>
</body>

CSS #

.loader {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.loader-content{
    height: 100%;
    width: 100%;
    position: relative;
}

.loader-overlay{
    width: 100vw;
    height: 100vh;
    z-index: 50;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--black);
    transition: opacity 0.5s, visibility 0.5s ease;
    transition-delay: 2s;
}

.loader-content img{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 55;
    transform: translate(-50%, -50%);
    width: 15%;
    height: auto;
    transition: opacity 0.5s, visibility 0.5s ease;
    transition-delay: 1.5s;
}

.loader-random-quote {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 55;
    font-family: "degular-text", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.3em;
    font-size: 2em;
    color: var(--white);
    transition: opacity 0.5s, visibility 0.5s ease;
    transition-delay: 1.2s;
}

.loader--hidden {
    opacity: 0;
    visibility: hidden;
}

JavaScript #

$(document).ready(function () {
    var quotes = new Array("Loading sweet video's...", "Loading... One pixel at a time...", "Lights, camera, action...", "Framing imagination, crafting reality..."),
        randno = quotes[Math.floor(Math.random() * quotes.length)];
    $('.loader-random-quote').append('<p id="demo"> ' + randno + '</p>');

    var i = 0;
    var txt = quotes;
    var speed = 50;

    function typeWriter() {
        if (i < txt.length) {
            document.getElementById("element").innerHTML += txt.charAt(i);
            i++;
            setTimeout(typeWriter, speed);
        }
    }
});

window.addEventListener("load", () => {
    const loader = document.querySelector(".loader");
    const loaderOverlay = document.querySelector(".loader-overlay");
    const loaderImage = document.querySelector(".loader-img");
    const RandomText = document.querySelector(".loader-random-quote");

    loaderOverlay.classList.add("loader--hidden");
    loaderImage.classList.add("loader--hidden");
    RandomText.classList.add("loader--hidden");

    loader.addEventListener("transitionend", () => {
        document.body.removeChild(loader);
    });
});

问题分析与修复 #

核心问题 #

1. 打字机逻辑错误：原代码中txt被赋值为整个quotes数组，而非随机选中的单条字符串randno，导致打字逻辑混乱；且未调用typeWriter()函数启动打字效果。
2. 元素过早隐藏：window.load事件中直接给文本元素添加loader--hidden类，打字效果还未执行就被隐藏，完全无法展示。

修正后的JavaScript代码 #

$(document).ready(function () {
    var quotes = ["Loading sweet video's...", "Loading... One pixel at a time...", "Lights, camera, action...", "Framing imagination, crafting reality..."],
        randno = quotes[Math.floor(Math.random() * quotes.length)];
    
    var i = 0;
    var txt = randno; // 锁定随机选中的单条字符串
    var speed = 50;
    const element = document.getElementById("element");

    function typeWriter() {
        if (i < txt.length) {
            element.innerHTML += txt.charAt(i);
            i++;
            setTimeout(typeWriter, speed);
            // 打字完成后延迟隐藏元素
            if (i === txt.length) {
                setTimeout(hideLoaderElements, 1000); // 完成后停留1秒再隐藏
            }
        }
    }

    // 启动打字效果
    typeWriter();
});

function hideLoaderElements() {
    const loader = document.querySelector(".loader");
    const loaderOverlay = document.querySelector(".loader-overlay");
    const loaderImage = document.querySelector(".loader-img");
    const RandomText = document.querySelector(".loader-random-quote");

    loaderOverlay.classList.add("loader--hidden");
    loaderImage.classList.add("loader--hidden");
    RandomText.classList.add("loader--hidden");

    loader.addEventListener("transitionend", () => {
        document.body.removeChild(loader);
    });
}

修复说明 #

• 将txt变量改为随机选中的单条字符串，确保打字逻辑针对正确文本。
• 主动调用typeWriter()函数，启动打字动画。
• 将元素隐藏逻辑移至打字完成后，并添加延迟，保证用户能完整看到打字效果。
• 移除原window.load事件中直接隐藏元素的代码，避免过早遮挡动画。

内容的提问来源于stack exchange，提问作者Gijs Kohlen