JavaScript

Automatic typewriter effect using Html, CSS and javascript

Hello everyone, In this lesson, we are gonna learn how to create an Automatic typewriter using Html, CSS, and Javascript. In the last lesson, we uploaded a post related to the Testimonial Box.

automatic typewriter effect:

It means an animation effect that works on the basis of loops. It writes the effect in the form of a loop and it continues forever.

In this typewriter, the writer is writing the line continuously. This is moving in the form of linear motion and it’s writing this effect in the form of a loop. Loop means to do work in the form of repetition. It is repeated again and again.

At the bottom, we have created a button for speed. It has the text of speed and then it has the numbers for speed. These numbers are editable and user can input their number for speed.

This speed can be changed by putting different numbers for its speed. It can write the text at a low and fast speed.

It has a beautiful background. Everything in this typewriter is editable and you can change it according to your demands.

How to create an Automatic typewriter:

Html Code:

It is so simple to create it using Html, CSS, and Javascript. First, you have to create a file of Html by giving it the name writer.html and then save it in any folder.

<!--fantacydesign.com-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Auto Text Effect</title>
  </head>
  <body>
    <h1 id="text">Starting...</h1>

    <div>
      <label for="speed">Speed:</label>
      <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
    </div>

    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Auto Text Effect</title>

</head>

<body>

<h1 id="text">Starting...</h1>

<div>

<label for="speed">Speed:</label>

</div>

</body>

</html>

CSS Code:

Create a file for CSS so that we can give a proper design to it. Name the CSS file as writer.css and then save it in the same folder. Copy the code and paste it into your CSS file and save the code.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
background-image: linear-gradient(to right, #eb3349  , #f45c43);
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
#text{
color: #fff;
font-size: 65px;
}

div {
  position: absolute;
  bottom: 100px;
  background: rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  font-size: 18px;
}

input {
  width: 60px;
  padding: 5px;
  font-size: 18px;
  background-image: linear-gradient(to left, #eb3349  , #f45c43);
  border: none;
  text-align: center;
    color: #fff;
}
label{
  color: #fff;
}

input:focus {
  outline: none;
  color: #fff;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {

box-sizing: border-box;

}

body {

background-image: linear-gradient(to right, #eb3349 , #f45c43);

font-family: 'Roboto', sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

#text{

color: #fff;

font-size: 65px;

}

div {

position: absolute;

bottom: 100px;

background: rgba(0, 0, 0, 0.1);

padding: 10px 20px;

font-size: 18px;

}

input {

width: 60px;

padding: 5px;

font-size: 18px;

background-image: linear-gradient(to left, #eb3349 , #f45c43);

border: none;

text-align: center;

color: #fff;

}

label{

color: #fff;

}

input:focus {

outline: none;

color: #fff;

}

JS Code:

Again create a file of Javascript with the name writer.js and also save it into the same folder. Copy the below javascript code and paste it into your file and save it in the same folder.

const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text = 'We Love Programming!'
let idx = 1
let speed = 300 / speedEl.value

writeText()

function writeText() {
    textEl.innerText = text.slice(0, idx)

    idx++

    if(idx > text.length) {
        idx = 1
    }

    setTimeout(writeText, speed)
}


speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

const textEl = document.getElementById('text')

const speedEl = document.getElementById('speed')

const text = 'We Love Programming!'

let idx = 1

let speed = 300 / speedEl.value

writeText()

function writeText() {

textEl.innerText = text.slice(0, idx)

idx++

if(idx > text.length) {

idx = 1

}

setTimeout(writeText, speed)

}

speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

You have created all the files and now go to that folder in which you have saved these files. Run the file of Html by clicking. You will see your output in your browser (Chrome, Mozilla Firefox, etc.)

Congratulation! You have created your automatic typewriter.

In this way, you can create it using Html, CSS, and javascript very easily. If you like the post then must like it, share it and comment below.

If you have any type of question/query then comment below so that we can resolve your problem.
Are you facing any type of error in your code? Don’t worry, we have created a file in zip form and you have to download it. Then extract it and open the file. Then run the main file of Html and run it in any browser you have. The code file is given below.

Thanks for reading this article.

Download Source File