Auto Typing Animation

 

Auto Typing Animation 

HTML

<div class="container">

<h1>I'm a <span class="typing"></span></h1>

<p>Auto Text Typing Animation Effect Using HTML CSS And JavaScript p>

</div>

CSS

<style>

*{

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: 'JetBrains Mono', monospace;

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

}

.container{

width: 100%;

height: 100vh;

background-color: #23204b;

font-size: 35px;

}

h1{

width: 100%;

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-weight: 1000;

color: #fff;

}

h1 span{

color: #b30f27;

}

p{

width: 100%;

text-align: center;

position: absolute;

top: 60%;

left: 50%;

transform: translate(-50%, -50%);

font-weight: 100;

color: whitesmoke;

font-size: 16px;

}

</style>

JAVASCRIPT

<script>

var typed = new Typed('.typing', {

strings: ['You Tuber', 'Web Developer', 'UI Designer'],

typeSpeed:100,

backSpedd:70,

loop:true

});

</script>

Font-Awasome CND

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css

/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvK

xVfELGroGkvsg+p" crossorigin="anonymous"/>