Building an Auto Text Effect Using HTML CSS and JavaScript

by

Hey, learner today In this blog post, We will be Building A Auto Text Effect Using HTML CSS, and JavaScript. In the past post, we have created many projects one of them is Creating A Password Generator Using Javascript. With Out wasting time Now it is time to create an Auto Text Effect.

Build Auto Text Effect Using HTML CSS and JavaScript

This is the project of the Auto Text effect using JS. This project is based on Automatic typing by JS The Basic design is created by HTML and CSS3. With the Help Auto typing effect, the website will be more attractive to the user.

As you see in the above image this is the output of the bellow code. We can control the speed of typing from the speed button. We can increase the speed to 10. You can see the result of the code in Codepen. You can easily edit the project and Copy it.

Preview of Auto Text Effect on Codepen

Codepen Link

You might like this

Building an Auto Text Effect Using HTML CSS and JavaScript [Source code]

For Building an Auto Text Effect Using HTML CSS and JavaScript. At first, you have to create three files (HTML, CSS, and JS) files with the named index.html, style.css, and Script.js in the same folder and you have to link the CSS and JS files to HTML. after that paste, the HTML code in index.html, and paste the CSS code in style.css at last paste the Javascript code in Script.js that’s all after pasting the code.

At first, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html
<!--Codingthai.com--> 
<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>

After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

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

* {
  box-sizing: border-box;
}

body {
  background-color: darksalmon;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

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

input {
  width: 50px;
  padding: 5px;
  font-size: 18px;
  background-color: darksalmon;
  border: none;
  text-align: center;
}

input:focus {
  outline: none;
}

At last, you have to create a Javascript file with the named script.js and paste the Js code on it and save it again don’t forget to give the .js extension to the Javascript file.

const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')
const text = 'We Love Codingthai HTML CSS and Javascript Project.'
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)

That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

Views: 367

Leave a Comment