JavaScript Typing Text Effect

Text animation is a technique for animating written content on a website or app. These animations can be text fades, slides, rotations, scaling, or more dynamic effects such as bouncing, flipping, or text morphing. Web developers implement text animation on their websites using CSS, JavaScript, or web animation libraries. This blog post will share a text typing animation snippet created using HTML, CSS, and JavaScript. Below is a video tutorial showing how to create this JavaScript snippet. Don't hesitate to watch the tutorial before you grab the source code.

Video Tutorial:

We hope you have watched the above typing text animation video tutorial. Text typing animation is one of those animations that helps to highlight key messages, draw attention to specific text or information. It also provides visual cues for how to navigate or explain content. We all know that an animated notification or title can stand out more effectively than static text. Text animation is also helpful for the overall aesthetics and professionalism of a website or app. In typing text animation, the letters of each word appear on the screen one by one. It is almost like someone typing on a keyboard. The effect is accompanied by a blinking cursor to make the typing animation feel more authentic. To create this effect, developers use JavaScript libraries like Typed.js. Here we have used HTML, CSS, and plain JavaScript to create this animation.

Many websites use this text animation in their hero section to dynamically display their taglines, slogans, product offerings, job titles, multiple skills, services, etc. A variety of websites, like startup and SaaS websites, developer portfolios, digital agencies and creative studios, event and conference pages, personal branding sites, and product landing pages, are using these typing text animations in a visually appealing and attention-grabbing way.

You May Also Like:

JavaScript Typing Text Effect [ Source Code ]:

To create this animated typing text snippet, we need to create an HTML, CSS, and a JS file. Then, copy the code from the code box below and paste it into those files. You can download the code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html> 
<html lang="en">
<!-- divinectorweb.com -->   
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Text Animation using HTML CSS and Javascript | No Plugin</title>
    <link href="https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <h1 id="text"></h1>
    </div>

    <script>
        const text = "Text Typing Animation"; 
let index = 0;
let direction = 1; 

function type() {
  if (direction === 1) {
    document.getElementById('text').textContent = text.slice(0, index++);
  } else {
    document.getElementById('text').textContent = text.slice(0, index--);
  }
  
  if (index === text.length) {
    direction = -1; 
  } else if (index === 0) {
    direction = 1; 
  }
}

setInterval(type, 150);
    </script>
</body>
</html>

ADD CSS:

body {
	font-family: "Protest Riot", sans-serif;
	display: flex;
	justify-content: center; 
	align-items: center;
	height: 100vh;
	margin: 0;
	background: linear-gradient(to bottom, #09d3f3, #0159e4);
}
.container {
	text-align: center;
}
#text {
	font-size: 80px;
	border-right: 3px solid #fff;
	white-space: nowrap;
	overflow: hidden;
	color: #fff;
}

Typing text animation creates anticipation and holds the user’s attention, which helps in increasing user engagement and direct attention. This text effect makes the reading experience more focused. You should also consider implementing this typing text effect in your next project. Hope you have collected the source code. To know more, please click the Load More button on our homepage. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

JavaScript Typing Text Effect [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

JavaScript Typing Text Effect

Video Tutorial:

JavaScript Typing Text Effect [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form