In this code you have a short text that is fixed and the word variable that is displayed next to this text along with the typing animation. The typing animation is displayed with a yellow and flashing cursor. You can use this code when you want to place text and animation on the main page of your website for your website.
HTML
<!-- This script got from www.devanswer.com -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<div class='container'>
<p class='typewriter'>I'm a
<span class='typewriter-text' data-text='[ "photographer. ", "designer. ", "developer. " ]'></span>
</p>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
html, body {
width: 100%;
height: 100%;
background-color: #3a3a3a;
margin:0;
}
.container {
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
.typewriter {
font-family: sans-serif;
color: #fff;
padding-left: 30px;
display: block;
}
.typewriter-text {
padding-right: 10px;
color: #ffe509;
border-right: solid #ffe509 7px;
text-transform: uppercase;
animation: cursor 1s ease-in-out infinite;
font-weight: bold;
}
@keyframes cursor {
from {
border-color: #ffe509;
}
to {
border-color: transparent;
}
}
@media (max-width: 767.98px) {
.typewriter {
font-size: 35px;
}
}
@media (min-width: 768px) {
.typewriter {
font-size: 60px;
}
}Javascript
$(document).ready(function () {
typing(0, $('.typewriter-text').data('text'));
function typing(index, text) {
var textIndex = 1;
var tmp = setInterval(function () {
if (textIndex < text[index].length + 1) {
$('.typewriter-text').text(text[index].substr(0, textIndex));
textIndex++;
} else {
setTimeout(function () { deleting(index, text) }, 2000);
clearInterval(tmp);
}
}, 150);
}
function deleting(index, text) {
var textIndex = text[index].length;
var tmp = setInterval(function () {
if (textIndex + 1 > 0) {
$('.typewriter-text').text(text[index].substr(0, textIndex));
textIndex--;
} else {
index++;
if (index == text.length) { index = 0; }
typing(index, text);
clearInterval(tmp);
}
}, 150)
}
});
