This is a simple Javascript code that demonstrates an example of a DOM manipulation wherein we can make our webpage display a text animation that resembles a Typewriter. For this animation to look a lot better, we also use a 1942 custom font to mimic an old typewriter font. In addition, we added a background music to heighten the effects.
Special thanks to Johan Holmdahl for the 1942 font, and to David Fesliyan for the royalty-free BGM entitled “Cold Isolation”.
As for the poem, I composed it somewhere in 2016-2017. It’s called Sleepy Park. It’s one of my dreams that I turned into a poem. I never thought it would become real though as it seems… I am now walking alone in a sleepy park… this time, in real life!
You guys can download the complete pack, along with the 1942 font, the html file, and the BGM ogg file from the link below:
https://drive.google.com/open?id=1iioSm51fTQstuzabRNm5jbQOfXAcgPoI
I don’t mind helping anyone out with the codes as well as sharing my composition, but please do share my post, and do give me credit or a link back whenever you guys use any of my work. I would greatly appreciate it.
The Code
<!DOCTYPE html>
<html>
<head>
<title>Typewriter Animation</title>
<style>
@font-face{
font-family: nineteenfourtytwo;
src: url(1942.ttf);
}
body, h1{
font-family: nineteenfourtytwo, Courier New, Courier, monospace;
}
p {
font-family: nineteenfourtytwo, Courier New, Courier, monospace;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
display: inline;
white-space: nowrap;
}
.blinking-cursor {
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
@keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
</style>
</head>
<body>
<h1>Typewriter Animation</h1>
<button onclick="starttyping()">Start</button><br><br>
<audio id="BGM">
<source src="cold_isolation_David_Fesliyan.ogg" type="audio/ogg">
</audio>
<center>
<p id="type"></p>
<p class="blinking-cursor">|</p>
</center>
<script type="text/javascript">
var i = 0;
var typeSpeed = 150;
var bgm = document.getElementById("BGM");
var text = "The\xa0Sleepy\xa0park\n" +
"By\xa0Anthony\xa0L.\xa0Yap\n\n\n\n" +
"I\xa0dream\xa0of\xa0a\xa0park\xa0in\xa0my\xa0early\xa0days\n" +
"Lighted\xa0by\xa0dim\xa0lights\xa0from\xa0some\xa0lonely\xa0posts\n" +
"A\xa0deafening\xa0silence\xa0rules\xa0the\xa0place\n" +
"An\xa0eerie\xa0atmosphere\xa0surrounds\xa0the\xa0air\n\n\n" +
"In\xa0that\xa0slumber\xa0for\xa0hours\xa0maybe\n" +
"I\xa0stroll\xa0the\xa0park\xa0through\xa0darkness\xa0thin\n" +
"A\xa0feeling\xa0of\xa0melancholia\xa0embraces\xa0me\n" +
"To\xa0my\xa0hearts\xa0content\xa0it\xa0pleases\xa0me\n\n\n" +
"A\xa0solemn\xa0place\xa0for\xa0my\xa0solitude\n" +
"Not\xa0a\xa0lively\xa0soul\xa0confined\xa0with\xa0me\n" +
"I\xa0walk\xa0alone\xa0no\xa0company\n" +
"I\xa0traverse\xa0that\xa0park\xa0for\xa0eternity";
function starttyping(){
if(i < text.length){
bgm.play();
document.getElementById("type").innerText += text.charAt(i);
i++;
setTimeout(starttyping, typeSpeed);
}
}
</script>
</body>
</html>
The style plays a great part in designing the webpage and providing some cool effects such as the blinking cursor. That part is not Javascript. Also note of @font-face at-rule. As it is used to convert the texts into 1942 font.
I will only focus on explaining some Javascript functions. I will leave the rest for you guys to figure it out. It is recommended that you at least have some basic Javascript understanding.
Perhaps, we’ve mentioned the function document.getElementById from the previous Javascript code I wrote so I will skip that one too. But for those who missed my last Javascript post, you can either search it on my website under Web Resources/Web Development/Javascripts or use the search bar. That function targets an id in the page and applies the function into it. Also note that ids are unique and should be unique. It shouldn’t be used twice in a webpage.
The animation starts upon clicking the button start. If you guys notice, there is an onclick event in it and the function attached to it is starttyping, which corresponds to our Javascript function starttyping(). In our function, we have a condition that if variable i is less than text.length (this is converted into a number by string property length), then we play the audio id BGM (the file is inside the <audio>). After that we call the function document.getElementByID(“type”) to target the <p> element with the id “type”. That is where our typewriter animation effect will take place. Notice also that we attach .innerText in document.getElementByID(“type”). innerText is a DOM property. It will be use to store our texts but since it’s innerText, all white spaces and non-texts strings will be stripped off. That’s why in our text variable, we are using \n to create a line break and \xa0 to create a white space. If we want it to be stored in HTML format, we could use innerHTML, but unfortunately, we can’t do that since our code here is typing one character at a time. If we use <br> for a line break, it’s just going to type it exactly as <br> instead of creating a line break. The string operator += adds new characters to our element using the charAt() method. charAt returns the character at the specified index in a string. As you notice, our function will keep on looping until i is = to the length of var text. In order to make it meet the condition, i has to be incremented per cycle. The final function setTimeout controls the interval of the function. It’s firing the function at the rate declared by var typeSpeed.
Follow me at:
