Learn how to create a typing effect with JavaScript.
To create the Typing Effect with JavaScript follw the step below:
- Add HTML
- Add CSS (optional)
- Add JavaScript
To see the live output of the animation click here.
Step1.
Add HTML
<div class="container">
<div class="face">
<div class="smile"></div>
</div>
<div id="text"></div>
</div>
Step2.
Add CSS
Style the text:
body {
background-color: #2a9d8f;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
position: relative;
top:0;
left:30%;
width:100%;
}
#text {
position: absolute;
color: #e9c46a;
font-size: 50px;
font-family: "Courier New", Courier, monospace;
letter-spacing: 10px;
text-shadow: 3px 5px 0px rgba(0, 0, 0, 0.7);
}
.face {
position: absolute;
border-radius:50%;
background-color: #ffe066;
width:200px;
height:200px;
z-index:-5;
left:270px;
top:-80px;
box-shadow: inset 5px 5px #f5cb5c, 5px 5px rgba(0,0,0,0.07);
}
.face:after {
content:"";
position: absolute;
border-radius:50%;
background-color: black;
width:20px;
height:20px;
left:70px;
top:60px;
-webkit-transform-origin: 50%;
-webkit-animation: blink 2s infinite;
}
.face:before {
content:"";
position: absolute;
border-radius:50%;
background-color: black;
width:20px;
height:20px;
left:115px;
top:60px;
-webkit-transform-origin: 50%;
-webkit-animation: blink 2s infinite;
}
.smile {
position: absolute;
top: 100px;
left: 65px;
width: 80px;
height: 40px;
border-radius: 0 0 100px 100px;
overflow: hidden;
background:#000;
}
.smile:after {
content:"";
position: absolute;
top: 15px;
left: 12px;
width: 70%;
height: 70%;
border-radius: 100px 100px 0 0;
background: #e56b6f;
}
@-webkit-keyframes blink {
0%, 100% {
transform: scale(1, .05);
}
5%,
95% {
transform: scale(1, 1);
}
}
Step3.
Add JavaScript
Type your text:
var text = document.getElementById('text');
var typewriter = new Typewriter(text, {
loop: true
});
typewriter.typeString('Hello!')
.pauseFor(2500)
.deleteAll()
.typeString('How are you today?')
.pauseFor(2500)
.deleteAll()
.typeString('Have a nice day :)')
.pauseFor(2500)
.start();
Note: Don’t forget to add the JS library to your code!
<script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.min.js"></script>
To see the live output of the animation go to lenastanley.com.
Watch also the video tutorial:
Enjoy coding!