Author: | jQueryScript |
---|---|
Views Total: | 6,136 views |
Official Page: | Go to website |
Last Update: | April 20, 2023 |
License: | MIT |
Preview:

Description:
The ChatGPT Typewriter script simulates the text typing effect you see on ChatGPT (https://chat.openai.com/).
The best part is that the script provides a custom random delay effect to emulate natural thinking and typing patterns.
It also displays a blinking cursor at the end of the typing sequence, enhancing the overall typing experience and bringing the effect to life.
How to use it:
1. Create a container in which the text will be printed with a typing animation.
<div id="typewriter"></div>
2. Add the following JavaScript snippets to your document.
const typewriter = document.getElementById('typewriter'); let index = 0; function type() { if (index < text.length) { typewriter.innerHTML = text.slice(0, index) + '<span class="blinking-cursor">|</span>'; index++; setTimeout(type, Math.random() * 150 + 50); } else { typewriter.innerHTML = text.slice(0, index) + '<span class="blinking-cursor">|</span>'; } } // start typing type();
3. Style & animate the cursor.
.blinking-cursor { margin-left: 5px; background-color: #fff; animation: blink 1s infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 50.1%, 100% { opacity: 0; } }
4. Define your text to be printed.
const text = "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.";