CODE:
"HTML"
<html>
<body>
<h1>ANIMATED TEXT JS</h1>
<button onclick="typeWriter()">ACTIVATE</button>
<style>
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
</style>
<link rel="stylesheet" href="css13.css">
<body style ="background-color: orange;">
<p id="OPEN"></p>
<script>
var a = 0;
var text = 'VISIT WIRED2TECH.ORG TO LEARN TO CODE.This project was made by: Mohammed Ibrahim Mirza Beig.This project used the font "Press Start 2P" which is licensed under the open font license and was obtained from google fonts.';
var frameSD = 60;
function typeWriter() {
if (a < text.length) {
document.getElementById("OPEN").innerHTML += text.charAt(a);
a++;
setTimeout(typeWriter, frameSD);
}
}
</script>
</body>
</html>
"CSS"
h1{
color:gold;
-webkit-text-fill-color:gold;
-webkit-text-stroke-width:2px;
-webkit-text-stroke-color:black;
font-family: 'Press Start 2P', cursive;
}
p{
color:green;
-webkit-text-fill-color:green;
-webkit-text-stroke-width:1.25px;
-webkit-text-stroke-color:black;
font-family: 'Press Start 2P', cursive;
}
button{
color:blue;
-webkit-text-fill-color:blue;
-webkit-text-stroke-width:2px;
-webkit-text-stroke-color:black;
font-family: 'Press Start 2P', cursive;
}
This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
ReplyDeleteWordPress development company in Chennai