JavaScript Typing Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Animation</title>
<style>
textarea{
word-wrap:break-word;
white-space:pre-wrap;
grid:1;
position:fixed;
z-index:1000;
}
.activate{
position:fixed;
margin-left:0px;
}
.clear{
position:fixed;
margin-left:100px;
}
body{
display:grid;
grid-template-columns:repeat(2,10vw);
grid-template-rows:repeat(2,10vw);
gap:10px;
align-items:justify;
margin:5px;
padding:5px;
}
.output{
scroll-behavior:smooth;
height:auto;
width:auto;
grid-column:2/2;
}
</style>
</head>
<body>
<textarea></textarea>
<pre class="output"></pre>
<div class="container">
<button class="activate">StartTyping</button>
<button class="clear">Clear</button>
</div>
</body>
<script>
let element=document.querySelector("textarea");
let destination = document.querySelector(".output");
let activate_btn = document.querySelector(".activate");
let clear_btn = document.querySelector(".clear");
let count=0;
//event listener on activate button
activate_btn.addEventListener("click",()=>{
setInterval(()=>{
destination.textContent += element.value.charAt(count);
count+=1 ;
},10);
});
//clear button
clear_btn.addEventListener("click",()=>{
destination.textContent = "";
location.reload();
});
//scroll automatically
setInterval(()=>{
window.scrollTo(0,destination.scrollHeight);
},100);
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Animation</title>
<style>
textarea{
word-wrap:break-word;
white-space:pre-wrap;
grid:1;
position:fixed;
z-index:1000;
}
.activate{
position:fixed;
margin-left:0px;
}
.clear{
position:fixed;
margin-left:100px;
}
body{
display:grid;
grid-template-columns:repeat(2,10vw);
grid-template-rows:repeat(2,10vw);
gap:10px;
align-items:justify;
margin:5px;
padding:5px;
}
.output{
scroll-behavior:smooth;
height:auto;
width:auto;
grid-column:2/2;
}
</style>
</head>
<body>
<textarea></textarea>
<pre class="output"></pre>
<div class="container">
<button class="activate">StartTyping</button>
<button class="clear">Clear</button>
</div>
</body>
<script>
let element=document.querySelector("textarea");
let destination = document.querySelector(".output");
let activate_btn = document.querySelector(".activate");
let clear_btn = document.querySelector(".clear");
let count=0;
//event listener on activate button
activate_btn.addEventListener("click",()=>{
setInterval(()=>{
destination.textContent += element.value.charAt(count);
count+=1 ;
},10);
});
//clear button
clear_btn.addEventListener("click",()=>{
destination.textContent = "";
location.reload();
});
//scroll automatically
setInterval(()=>{
window.scrollTo(0,destination.scrollHeight);
},100);
</script>
</html>
Comments
Post a Comment