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
This is such an informative post. You have a lot of really great points. I wish I had this post as a resource when I started blogging.
ReplyDeleteBIM documentation in USA
ANIMATION SERVICES