While coming home, I’ve seen a super store showing their items on a big LED type banner. Where item names were scrolling using some lights on/off. It’s an everyday scenery, nothing special.
But I’ve come to realize soon, in back of my head, I am thinking how it can be made for web. And, LED banner has landed on earth within few hours using the wings of jQuery. Here is the fun!
How it works?
It’s pretty simple!
- createLights() makes the board (the target div) empty and create lights (span elements) in it as row and column.
- I have an array named ‘map’ that stores which lights should on for a character in 3 dimensional format.
- Using getMap() , I am creating an array of all columns for boards text.
- draw() is drawing (turning on required lights) the text.
- scrollText() make it moving. This funciton just take leftmost column and place after rightmost.
- LED Banner is scrolling. Done.
Let’s talk a bit more about map array. For eaxmple, take this line –
map[")"] = [[0,7],[1,6],[2,3,4,5]];
Here, this element of map store information for printing ‘)’.
it has 3 elements which means 3 columns will be used to print this.
[0,7] is first column for this character where 0th and 7th light (from top) should keep on.
Later, if I can manage some more time, hope to make it as a jQuery plugin.
However, if you are interested to make it as a plugin, go ahead!