<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Typing Effect</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen+Mono" rel="stylesheet">
<style>
body, html {
margin: 0;
height: 100%;
text-align: center;
font-family: "Oxygen Mono", monospace;
color: blue;
}
h1 {
text-transform: uppercase;
letter-spacing: 1pt;
font-size: 20pt;
margin-bottom: 15px;
color: blue;
}
p {
text-align: justify;
margin: 0;
text-transform: lowercase;
font-size: 10pt;
font-weight: 200;
width: 100%;
display: none;
font-size: 20px;
color: green;
}
#table {
display: table;
width: 100%;
height: 100%;
background-color: #e5e5e5;
}
#centeralign {
display: table-cell;
vertical-align: middle;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div id="table">
<div id="centeralign">
<h1>jquery type animate</h1>
<p>body, html {
margin: 0;
height: 100%;
text-align: center;
font-family: "Oxygen Mono", monospace;
color: #999;
}
h1 {
text-transform: uppercase;
letter-spacing: 1pt;
font-size: 60pt;
margin-bottom: 15px;
}
p {
text-align: center;
margin: 0;
text-transform: lowercase;
font-size: 10pt;
font-weight: 900;
width: 50%;
display: none;
font-size: 50px;
}
#table {
display: table;
width: 100%;
height: 100%;
background-color: #e5e5e5;
}
#centeralign {
display: table-cell;
vertical-align: middle;
}
function typeEffect(element, speed) {
var text = element.innerHTML;
element.innerHTML = "";
var i = 0;
var timer = setInterval(function () {
if (i < text.length) {
element.append(text.charAt(i));
i++;
} else {
clearInterval(timer);
}
}, speed);
}
// application
var speed = 75;
var h1 = document.querySelector('h1');
var p = document.querySelector('p');
var delay = h1.innerHTML.length * speed + speed;
// type affect to header
typeEffect(h1, speed);
// type affect to body
setTimeout(function () {
p.style.display = "inline-block";
typeEffect(p, speed);
}, delay);
</p>
</div>
</div>
<script id="rendered-js" >
function typeEffect(element, speed) {
var text = element.innerHTML;
element.innerHTML = "";
var i = 0;
var timer = setInterval(function () {
if (i < text.length) {
element.append(text.charAt(i));
i++;
} else {
clearInterval(timer);
}
}, speed);
}
// application
var speed = 75;
var h1 = document.querySelector('h1');
var p = document.querySelector('p');
var delay = h1.innerHTML.length * speed + speed;
// type affect to header
typeEffect(h1, speed);
// type affect to body
setTimeout(function () {
p.style.display = "inline-block";
typeEffect(p, speed);
}, delay);
</script>
</body>
</html>
Comments
Post a Comment