Solution: Typewriter Effect using HTML, CSS & JavaScript with source code, demo, and also how you can execute full program easily. To complete the program you need to follow those steps given bellow
Hi coder, Previously we discuss How to Implement Google Pie Chart in HTML Page, But this time we implement Typewriter Effect using HTML CSS and JavaScript. More this time program will come in the future, so stay with us.
Live Demo
Also Helpful –
Responsive Header Navigation Menu
Typing Effect using HTML, CSS & JavaScript
Firstly, What is Typing Effet or Typewriter Effect? Any full line text completes his execution in several-time. There are lots of typing effect which you can execute easily. Here we discuss the auto code hacker like typing effect on any web page.
Here we use a container to view the effect and green font to view the text. You use the design whatever you can do. In the JavaScript page, the foundation to watch out "textarea.append"
function to appending the text which you won’t show and “setInterval
” function to how much time (in milliseconds) an expression at specified intervals.
To complete this program with debugging free code you have to create three files. The first file is to HTML and the second file gonna be CSS for design part and the third file JavaScript for function-related,
index.html
Create an HTML file named ‘index.html‘ and put those codes given below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!-- Coding Debugging (https://codingdebugging.com) --> <!DOCTYPE html> <html lang="en"> <head> <title>Typing Effect - Coding Debugging</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <!-- Google Fonts --> <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet'> <!-- My Stylesheet --> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <textarea class="code" readonly=""> </textarea> <article class="output" id="output"> </article> </div> <!-- JavaScript Page --> <script src="function.js" type="text/javascript"></script> </body> </html> |
style.css
Create a CSS file named ‘style.css‘ and put those codes given below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
body { background-color: #fff; overflow-y:hidden ; } .container{ width:100%; height:200vh; display: flex; flex-direction: column; justify-content: space-around; align-items: center ; } *{ margin: 0; padding: 0; box-sizing: border-box ; } .code{ height:75vh; width:95%; background-color: #222; border-left: 6px solid lime; color: lime; text-indent: 5px; padding: 10px; border-radius: 0px 10px 10px 0px; font-family: Nunito; } .output{ background-color: transparent; height:50vh; width:90%; color: transparent ; } h2{ text-align: center ; padding-top: 10px; color: #E4405F; font-family: times new roman; } #range{ width:70%; outline: none; appearance: none; -webkit-appearance: none; background-color: #0077B5; height:5px; border-radius: 20px; margin-top:20px; } #range::-webkit-slider-thumb{ border-radius: 50%; appearance: none; -webkit-appearance: none; height:25px; width:25px; background-color: #E4405F; } |
function.js
Create a JavaScript file named ‘function.js‘ and put those codes given below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(document).ready(function(){ var code = ` Your Typing Text Input Here... `; var i = 0; var textarea = $(".code"); var output = $(".output"); function appendtext(){ textarea.append(code.charAt(i)); i++; textarea.scrollTop(textarea[0].scrollHeight); } function renderOutput(){ output.html(textarea.val()); if(i==code.length){ clearInterval(interval); clearInterval(render); } } //CHANGE THE NUMERIC VALUES BELOW TO CHANGE TYPING SPEED var interval = setInterval(appendtext,50); var render = setInterval(renderOutput,50); }); |
Thank you for visiting!
We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.
Keep coding, Keep debugging!