In this tutorial I’ll show you how to achieve the split-flap display (aka airport departure board) effect with JavaScript. Now available also as Jquery plugin
Before we start with the coding, let my explain really quick what we’ll do. For the purpose of this tutorial I’ve prepared a table with strings. My if-act (effect) will be executed on mouse over and stopped on mouse out if necessary. Let’s get started!
When you look at an airport departure board what do you see? Yep, flipping characters! So lets begin by defining the chars we want to flip in a long string.
|
1 |
var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz "; |
Let’s put this variable in the body of a constructor function that will be our flipper class.
|
1 2 3 |
function flipper (obj) { var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz "; } |
As you can see the constructor has 1 parameter that is the object whose innerHTML we’ll flip. In order to do that we need the chars of the innerHTML in an array. Chopping a string to array is simple with the method .split() of the String class. I also use another two arrays. The first I called indexes holds the indexes of the chars that need to be flipped. The other one is the array that will be flipped and it holds indexes of chars in our chars variable. With a little bit of initialization we come to this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function flipper (obj) { var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz "; this.obj = obj; this.textArray = this.obj.innerHTML.split(""); this.html = this.obj.innerHTML; this.indexes = []; this.cia = []; // CIA - just a coincidence. Stands for Character Indexes Array this.interval; var _this = this; for (var i = 0; i<this.textArray.length; i++) { this.cia.push(0); this.indexes.push(i); } } |
We’ll come to the rest of the variables in a moment but first take a look at the initialization loop. When the if-act starts every char from the innerHTML will start to flip from the char at position 0 in chars (#). I need all of them to start rolling and that’s why I push all indexes in the indexes array. Notice that indexes in this variable correspond to those of both the textArray and the cia. The flipping will be handled by a function called roll(). In its body there is a loop trough indexes. For every index I increment the value in cia and thus go another char forward from chars until I reach the char that is at the same index in textArray. In that case I exclude the index so that it’s not flipped anymore. The function looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 |
this.roll = function () { for(var i = 0; i<this.indexes.length; i++) { this.cia[this.indexes[i]]++; if (chars.charAt(this.cia[this.indexes[i]]).toUpperCase() === this.textArray[this.indexes[i]].toUpperCase()) this.indexes.splice(i,1); } this.repaint(); if (this.indexes.length == 0) this.stop(); // if no chars need to be flipped - stop } |
The repaint function assembles the string and puts/shows it.
|
1 2 3 4 5 |
this.repaint = function () { var txt=''; for (var i = 0; i<this.cia.length; i++) txt+=chars.charAt(this.cia[i]); this.obj.innerHTML=txt; } |
The roll method is called every 70ms by setInterval(). That’s what I need the this.interval variable for.
|
1 2 3 4 5 6 7 8 |
this.timeInt = function () { this.interval=setInterval(function () {_this.roll()},70); } this.stop = function () { clearInterval(this.interval); // no more rolling this.obj.innerHTML = this.html; // restore the original innerHTML } |
_this holds the instance scope. And the code of the whole class goes like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
function flipper (obj) { var chars="#@!$%&*()_-0123456789abcdefghijklmnpqrstuvwxyz "; this.obj = obj; this.textArray = this.obj.innerHTML.split(""); this.html = this.obj.innerHTML; this.indexes = []; this.cia = []; this.interval; var _this = this; for (var i = 0; i<this.textArray.length; i++) { this.cia.push(0); this.indexes.push(i); } this.start = function () { this.timeInt(); } this.stop = function () { clearInterval(this.interval); this.obj.innerHTML = this.html; } this.repaint = function () { var txt=''; for (var i = 0; i<this.cia.length; i++) txt+=chars.charAt(this.cia[i]); this.obj.innerHTML=txt; } this.roll = function () { for(var i = 0; i<this.indexes.length; i++) { this.cia[this.indexes[i]]++; if (chars.charAt(this.cia[this.indexes[i]]).toUpperCase() === this.textArray[this.indexes[i]].toUpperCase()) this.indexes.splice(i,1); } this.repaint(); if (this.indexes.length == 0) this.stop(); } this.timeInt = function () { this.interval=setInterval(function () {_this.roll()},70); } } |
You can check out the demo here: split-flap display if-act
The second table holds another version of my class which starts to flip the chars one by one.
Tips and Hints: You can control the speed of the if-act by reducing/increasing the time in setInterval() and/or the number of the chars in chars.
For questions, suggestions or requests use the comment section below.
I much prefer informative articles like this to that high brow liteatrure.
I feel so much happier now I undertasnd all this. Thanks!
Strongly suggest adding a “google+” button for the blog!
Done! 🙂
I discovered your weblog internet site on google and check some of your early posts. Continue to maintain up the quite very good operate. I just additional up your RSS feed to my MSN News Reader. Seeking forward to reading far more from you later on!
hi i came to youre blog, and I have read some good articles on it. It’s all about the game gokkasten let’s PLAY!!!
Really clean site , thanks for this post. 386234
I feel it looks better with a monospace font
Hello there, simply became aware of your weblog via Google, and located that it’s really informative. I am gonna watch out for brussels. I will appreciate if you continue this in future. Lots of people might be benefited from your writing. Cheers!
I love your blog.. very nice colors & theme. Did you create this website yourself? Plz reply back as I’m looking to create my own blog and would like to know wheere u got this from. thanks
Like your article here! Very interesting and handy! Awesome work!
Normally I do not read post on blogs, but I would like to say that this write-up very forced me to try and do so! Your writing style has been surprised me. Thanks, very nice post.
Good day! I know this is kinda off topic but I’d figured I’d ask. Would you be interested in trading links or maybe guest authoring a blog post or vice-versa? My blog addresses a lot of the same subjects as yours and I feel we could greatly benefit from each other. If you are interested feel free to send me an e-mail. I look forward to hearing from you! Great blog by the way!
Maybe there is a problem with the CSS here? I can’t make out anything here without highlighting it with the mouse, because it’s all green. I’m using Chrome if it helps.
Oh my goodness! an amazing article dude. Thanks Nevertheless I am experiencing subject with ur rss . Don’t know why Unable to subscribe to it. Is there anybody getting an identical rss problem? Anybody who knows kindly respond. Thnkx
I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post.
то что я искал, спасибо
user/password for the demo?