<head>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</head>
<div id="text=box">
<div class='line1'> <p> this is text line one </p></div>
<p class='line-2'> This is number 2 </p>
<br/>
<br/>
<br/>
<button> move </button>
<div class="typewriter">
<h1> Hello World </h1>
</div>
.line1{
position: absolute;
left: 0px;
opacity: 0.01;
}
.typewriter{
width: 20%;
}
.typewriter h1 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
white-space: nowrap; /* Keeps the content on a single line
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(25, end);
/* blink-caret .75s step-end infinite; */
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
$(()=>{
let $line1 = $('.line1');
let $button = $('button');
$button.on('click', ()=>{
$line1.animate({
left: '+=300',
opacity: 1.0 }, 2000, 'linear');
console.log('clicked');
})
})
/// Also check this out
// https://css-tricks.com/snippets/css/typewriter-effect/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.