I've created a function that segments each letter in the paragraph to create the typing effect. But, after a few days off, I saw that the effect is the opposite, namely the letters disappear. Long story short, I tried to animate the desired paragraph letter by letter in order to achieve the so-called writing effect. The whole process was a success, but after I had to change the bootstrap version, the function behaves in antithesis. When starting the web page, the paragraph gradually disappears. What can be the cause of the problem? The code is attached bellow. Thanks in advance!
<pre> index.html </pre> <div class="id"> <h1 class="title"> Hot Beans Coffee Shop </h1> <p class="subtitle"> "Born out of unique appreciation for coffee" </p> <script src="./app.js"></script> </div> <pre> app.js </pre> const text= document.querySelector(".id.subtitle"); const strText=text.textContent; const splitText= strText.split(""); text.textContent = ""; for ( let i=0 ; i<splitText.length; i++){ text.innerHTML+="<span>" + splitText[i] + "</span>"; } let char=0; let timer=setInterval(onTick, 50); function onTick(){ const span=text.querySelectorAll("span")[char]; span.classList.add("fade"); char++; if(char === splitText.length){ complete(); return; } } function complete(){ clearInterval(timer); timer=null; } <pre> app.js </pre> span{ opacity: 1; transition: all 0.3 s ease; } span.fade{ opacity: 1; }
https://stackoverflow.com/questions/66936973/are-javascript-functions-closely-related-to-the-bootstrap-used-version April 04, 2021 at 08:12AM
没有评论:
发表评论