Animated writing text banner design code example 02 live demo

Go back to tutorial

<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" >

<title>Animated writing text banner design </title>
<style>
#banner_abs {
background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url(https://picsum.photos/id/1/2400/500);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.banner_common {
    width: 100%;
    overflow: hidden;
    color: 
#fff;
}

.banner_common .row {
min-height: 450px;
}

.big_title {
position: relative;
padding-bottom: 10px;
font-size: 40px;
line-height: 45px;
}

.text-uppercase {
letter-spacing: 0.1em;
}

</style>
</head>
<body>
<section id="banner_abs" class="banner_common">
    <div class="container px-0">
        <div class="row d-flex align-items-center">
    
        <div class="col-sm-12">
            <div class="col-sm-12 text-left ">
                    <div class=" upper text-white ">
                        
                        <h2 class="text-uppercase text-white big_title"><span class="line">About Us</span></h2>
                        <h3 class="text-uppercase text-white"><span class="typed-text"> </span><span class="cursor typing">&nbsp;</span></h3>
                        <a href="https://abdultechhub.com/" class="btn btn-primary mt-3">About us</a>
                    </div>
            </div>
        </div>
        </div>
    </div>
    </section>
<script>
const typed_text_span = document.querySelector(".typed-text");
const cursor_span = document.querySelector(".cursor");

const text_array = ["WELCOME TO Abdul Tech Hub","We provide free code source", "Abdul Tech Hub Helps to Build Best web application"];
const typing_delay = 100;
const erasing_delay = 20;
const new_tex_elay = 100; // Delay between current and next text
let text_arrayIndex = 0;
let charIndex = 0;

document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
  if(text_array.length) setTimeout(type, new_tex_elay + 250);
});
</script>
   
  </body>
</html>