Home
Web Designing
Typing Effect using HTML, CSS & JavaScript | Typewriter Effect

Typing Effect using HTML, CSS & JavaScript | Typewriter Effect

How to Create a Typing Effect using HTML, CSS & JavaScript – 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

Live Demo

Live Demo Download Code

Also Helpful –

Responsive Header Navigation Menu

3D & 2D Google Pie Chart

Analog Clock using JavaScript

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.

<!-- 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>

<!DOCTYPE html>

<head>

<title>Typing Effect - Coding Debugging</title>

</head>

<body>

</textarea>

</article>

</div>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put those codes given below.

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;
}

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.

$(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);

});

$(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!

Live Demo Download Code

4 thoughts on “Typing Effect using HTML, CSS & JavaScript | Typewriter Effect”

Pingback: Animated SVG User Icon using HTML, CSS & JavaScript | Coding Debugging
Pingback: Emoji Rating System with Source Code | Coding Debugging
Pingback: Chosen Select Box with Search Option | Coding Debugging
Pingback: Bootstrap Rating Bar using HTML & CSS | Coding Debugging

Typing Effect using HTML, CSS & JavaScript | Typewriter Effect

Live Demo

Typing Effect using HTML, CSS & JavaScript

Like this:

Related

4 thoughts on “Typing Effect using HTML, CSS & JavaScript | Typewriter Effect”

Leave a Reply Cancel reply

Typing Effect using HTML, CSS & JavaScript | Typewriter Effect

Live Demo

Typing Effect using HTML, CSS & JavaScript

Share this:

Like this:

Related

4 thoughts on “Typing Effect using HTML, CSS & JavaScript | Typewriter Effect”

Leave a Reply Cancel reply