<html>
<head>
<title>Animated typing effect using typed js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/typed.js/1.1.4/typed.min.js" type="text/javascript"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: yellow;
}
.center{
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
text-align: center;
width: 100%;
}
.center span{
font-size: 68px;
color: #1e1d1d;
font-style: arial;
}
.write{
font-size: 62px;
}
</style>
</head>
<body>
<div class="center">
<span class="write"></span>
</div>
<script type="text/javascript">
$(function(){
$(".write").typed({
strings: ["Welcome to webcaty.com!", "please", "like", "share", "and"," comments"," on this video", "please", "subscribe our channel", "Thanks for watching"],
typeSpeed: 20,
loop:true,
});
});
</script>
</body>
</html>how to create Animated typing effect using typed js
July 25, 2017
0
