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

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

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

Typing Effect using HTML, CSS & JavaScript | Typewriter Effect

Live Demo

Also Helpful –

Typing Effect using HTML, CSS & JavaScript

Like this:

Related

Leave a Comment Cancel Reply

Live Demo

Also Helpful –

Typing Effect using HTML, CSS & JavaScript

Share this:

Like this:

Related

Leave a Comment Cancel Reply