Created
June 8, 2023 10:26
-
-
Save huksley/766ca502ddfe09f303f8f9325b0c9dab to your computer and use it in GitHub Desktop.
Text typing with cursor blinkin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="typewriter"> | |
<span id="typewriter-text"></span><span class="blinking-cursor">|</span> | |
</div> | |
<script src="https://cdn.twind.style" crossorigin></script> | |
<script> | |
function type(index, text) { | |
const typewriter = document.getElementById('typewriter-text'); | |
if (index < text.length) { | |
typewriter.__run = () => type(index + 1, text) | |
typewriter.innerHTML = text.slice(0, index); | |
setTimeout(() => typewriter.__run(), Math.random() * 150 + 50); | |
} else { | |
typewriter.innerHTML = text; | |
typewriter.__run = () => type(0, text) | |
setTimeout(() => typewriter.__run(), Math.random() * 4000 + 5000); | |
} | |
} | |
type(0, "This is a ChatGPT-like typing effect, simulating human typing with random delays and a blinking cursor. It also supports multiline text and ensures the cursor is displayed at the end of the last output character."); | |
</script> | |
<style type="text/css"> | |
@keyframes blink { | |
0%, 50% { | |
opacity: 1; | |
} | |
50.1%, 100% { | |
opacity: 0; | |
} | |
} | |
.blinking-cursor { | |
margin-left: 3px; | |
animation: blink 1s infinite; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment