Skip to main content

Fun CSS/JS : Font Typewriter Animation

Here is fun code to add typewriter animation to your words. Hope you guys having fun.

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="typedtext"></div>
<script src="script.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
// set up text to print, each item in array is new line
var aText = new Array(
"Somebody or something using your keyboard"
);
var iSpeed = 100; // time delay of print out
var iIndex = 0; // start printing array at this posision
var iArrLength = aText[0].length; // the length of the text array
var iScrollAt = 20; // start scrolling up at this many lines
var iTextPos = 0; // initialise text position
var sContents = ''; // initialise contents variable
var iRow; // initialise current row
function typewriter()
{
sContents = ' ';
iRow = Math.max(0, iIndex-iScrollAt);
var destination = document.getElementById("typedtext");
while ( iRow < iIndex ) {
sContents += aText[iRow++] + '<br />';
}
destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
if ( iTextPos++ == iArrLength ) {
iTextPos = 0;
iIndex++;
if ( iIndex != aText.length ) {
iArrLength = aText[iIndex].length;
setTimeout("typewriter()", 500);
}
} else {
setTimeout("typewriter()", iSpeed);
}
}
typewriter();
view raw script.js hosted with ❤ by GitHub
body {
font-family: monospace;
font-size:30px;
margin: 10px 50px;
letter-spacing: 6px;
font-weight: bold;
}
view raw style.css hosted with ❤ by GitHub

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Odoo: Get File Name of Uploaded Binary File

When uploading a file binary on odoo sometimeS we need to store the original file name for informative purpose. So thats why this tutorial will come in handy. well that was ridiculously fast !!! Things that need to take into account is make sure you add those xml on your formview because most of uploading file operation happen in formview. And then ypu can use the field file name in treeview.
Post a Comment
Read more

Odoo: Create Sequence or Running Number

Odoo sequence ussually needed for automatically generated and suppose to be unique value to identified certain object or in this context is document. For example company need unique document number for every Sales document they have. When we need to create NEW sequence in odoo ? When we have new object and this object suppose to have unique and auto generated number. in this example we have new object called 'sale.doc' will be used to store any document related to SO such as contract, delivery doc etc. 1. create xml code to declare the sequence 2. call the sequence and set it on certain char field ('name) that belongs to the same object
3 comments
Read more

Odoo Javascript Debugging

When it comes to programming, we can all agree that out code is rarely work on a first try. Because of the sheer virtue of fact that, even if you can conceptualize a problem and reduce it to it’s base states, to fully envision it into it’s most granular detail in terms of hundreds of lines of code - Is just not realistic. Thats why i can say that debugging is crucial part of programming. Here few tips to do javascript debugging in odoo using google chrome developer tools. some points also applicable on debugging general website not just odoo. Odoo Developer Mode (with assets) When it comes to javascript debugging in odoo, we should enable ‘asset debugging’. Trust me it will saves your ass a lot of time. Odoo internally use assets like CSS and JavaScript. In normal mode this asset will combined to a file. So debug with assets will prevent asset to be merged to one file and display actual CSS and JavaScript files on chrome dev tools. Of course this mode will reduce per...
2 comments
Read more