J'ai un site Web qui a une ligne de commande comme une animation, ce qui signifie que lorsque je l'actualise, il entrera une phrase. Cela fonctionne bien, mais je souhaite que certaines lettres (XYZ) apparaissent en rose fluo. J'ai essayé de le faire fonctionner de plusieurs manières, mais je n'y suis pas parvenu. Est-ce que quelqu'un sait comment faire ça?
J'ai essayé d'en ajouter un autre mais la boucle ne fonctionne pas correctement.
// set typing speed and wait times var timeInit = 400; // initial wait before typing first line var timeGap = 1000; // wait time between each line var timeChar = 110; // time until next letter var cursorChar = '_'; var originId = ['line1']; var originText = new Array(); for (var i = 0; i < originId.length; i++) { originText.push(document.getElementById(originId[i]).innerHTML); } var cursorLine = document.getElementById('cursor-line'); var currentTimeout; var showCursor; var typeWriter = function(index) { var loc = document.getElementById(originId[index]); var fullText = originText[index]; var letterCount = 0; // this function spits out one letter per call, then calls the subsequent typeLetter() var typeLetter = function() { currentTimeout = setTimeout(function() { loc.className = 'visible'; letterCount += 1; var showText = fullText.substring(0, letterCount); // stops the function from self-calling when all letters are typed if (letterCount === fullText.length) { loc.innerHTML = '>' + showText + '<span class="typed-cursor">' + cursorChar + '</spa'; } else { loc.innerHTML = '>' + showText + '<span class="typed-cursor">' + cursorChar + '</span>'; typeLetter(); } }, timeChar); }; typeLetter(); // show cursor on next line }; // calculated time delays var delayTime = [timeInit]; var cumulativeDelayTime = [timeInit]; for (var i = 0; i < originId.length; i++) { var elapsedTimeLine = originText[i].length * timeChar + timeGap + timeChar * 2; delayTime.push(elapsedTimeLine); var sum = 0; for (var j = 0; j < delayTime.length; j++) { sum += delayTime[j]; } cumulativeDelayTime.push(sum); } // calls setTimeout for each line var typeLineTimeout = new Array(); for (var i = 0; i < originId.length; i++) { typeLineTimeout[i] = setTimeout( (function(index) { return function() { cursorLine.className = 'hidden'; typeWriter(index); }; })(i), cumulativeDelayTime[i] ); } // stops all timeouts var skip = function() { clearTimeout(currentTimeout); clearTimeout(showCursor); for (var i = 0; i < typeLineTimeout.length; i++) { clearTimeout(typeLineTimeout[i]); } }; // rewrite text with value stored on page load // var rewriteText = function(index) { // var loc = document.getElementById(originId[index]); // loc.innerHTML = '> ' + originText[index]; // loc.className = 'visible'; // }; // trigger skip and rewrite on pressing enter or spacebar window.onkeydown = function(key) { if (key.which === 13 || key.which === 32) { skip(); originId.forEach(rewriteText); document.getElementById('cursor-line').className = 'visible'; } };
body { font-family: monospace; background-color: black; color: white; text-align: center; margin-top: 21%; } .neon-pink { color: #ff00ff; /* Neon Pink color code */ } .hidden { display: none; visibility: hidden; } /* ----- blinking cursor animation ----- */ .typed-cursor { opacity: 1; -webkit-animation: blink 0.95s infinite; -moz-animation: blink 0.95s infinite; -ms-animation: blink 0.95s infinite; -o-animation: blink 0.95s infinite; animation: blink 0.95s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
<p id="line1" class="hidden">ABCXYZDEF</p> <p id="cursor-line" class="visible">><span class="typed-cursor">_</span></p>
Si vous incluez des styles dans votre texte, comme celui-ci, cela gâche le timing, n'est-ce pas ?
Vous pouvez résoudre ce problème en mettant
letterCount
索引推进到typeLetter
n'importe quelle balise dans la fonction :