Do check out my YouTube channel to watch this tutorial and do subscribe to my YouTube channel to support me. Thanks!
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Typing Animation using typed.js Library | CodingPorium</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body{
background-color: black;
font-family:poppins;
}
.text-slider-items{
display:none;
}
.heading{
margin-top:200px;
text-align:center;
}
.heading h1{
color:royalblue;
font-size:70px;
}
.heading h3{
color:white;
font-size:20px;
}
</style>
<body>
<div class="heading">
<h1>CodingPorium</h1>
<h3>
<span class="text-slider-items">
Frontend web dev tutorials with free source code!
</span>
<strong class="text-slider"></strong>
</h3>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.min.js" integrity="sha512-zKaK6G2LZC5YZTX0vKmD7xOwd1zrEEMal4zlTf5Ved/A1RrnW+qt8pWDfo7oz+xeChECS/P9dv6EDwwPwelFfQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
if ($(".text-slider").length == 1){
var typed_strings =
$(".text-slider-items").text();
var typed = new Typed(".text-slider",{
strings:typed_strings.split(", "),
typeSpeed:50,
loop: true,
backDelay:900,
backSpeed:30,
})
}
</script>
</body>
</html>
Post a Comment