jquery 加载页面时在打字机效果中附加随机文本

我正试图创建一个打字机的效果4随机字符串，需要对页面加载变量。我把一切都弄好了，但打字机的效果有点问题。我尝试了几种方法，比如：Typed.js，打字机，但似乎什么都不能用。我猜CSS动画中的'steps'选项不太好用，因为会有几个随机字符串，所以字符会变化。
我希望有人能在这方面帮助我。非常感谢！

<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>

.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;
}

$(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);
    });
});

让它工作，调整代码中的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="element"></p>'); // Create an empty paragraph element

    var i = 0;
    var txt = randno; // Use the randomly selected quote
    var speed = 50;

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

    // Call the typeWriter function to start the typewriter effect
    typeWriter();
});

字符串

jquery 加载页面时在打字机效果中附加随机文本

1条答案

相关问题

热门标签

最新问答