Create A LED/LCD Style Text Scroller Using jQuery and CSS
File Size: | 5.1 KB |
---|---|
Views Total: | 13177 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery text scroller script which allows you to create an animated scrolling text LED sign on your web page.
See also:
How to use it:
1. Create the Html for the LED display.
<div id="wrapper"> <div class="0_0 light off"></div> <div class="0_1 light off"></div> <div class="0_2 light off"></div> ... </div>
2. The CSS to style the LED display and the text message.
.light { width: 5px; height: 5px; margin: 1px 1px; text-align: center; font-size: 15px; float: left; border-radius: 50%; } .off { background-color: #121212; } .on { background-color: red; }
3. Load the needed jQuery JavaScript library at the bottom of the web page.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
4. The JavaScript to enable the LED text scroller.
var SCROLLER_LENGTH = 120; var HEIGHT = 7; function clearLights(){ var lightsOn = $('.on'); lightsOn.addClass('off'); lightsOn.removeClass('on'); } function setLight(row, col, state){ var theLight = $('.'+row+'_'+col); if(theLight.hasClass('on') && !state){ theLight.removeClass('on'); theLight.addClass('off'); }else if(theLight.hasClass('off') && state){ theLight.removeClass('off'); theLight.addClass('on'); } } function drawMessage(messageArray, leftPointer){ var messageLength = messageArray.length; var totalScrollLength = SCROLLER_LENGTH + messageLength; if(messageLength>0){ for(var col=0;col<messageLength;col++){ for(var row=0;row<HEIGHT;row++){ var offsetCol = leftPointer + col; if(offsetCol<SCROLLER_LENGTH || offsetCol >= 0){ setLight(row,offsetCol,messageArray[col][row]); } } } } } function textToLED(theWord){ var theMessage = []; theWord = theWord.toUpperCase(); for(var i=0;i<theWord.length;i++){ theMessage.push(charToLED(theWord.charAt(i))); theMessage.push(charToLED()); } var flatten = []; flatten = flatten.concat.apply(flatten, theMessage); return flatten; } function charToLED(theChar){ var theLed = []; switch(theChar){ case 'A' : theLed = [[false, false, true, true, true, true, true], [false, true, false, false, true, false, false], [true, false, false, false, true, false, false], [false, true, false, false, true, false, false], [false, false, true, true, true, true, true]]; break; case 'B' : theLed = [[true, true, true, true, true, true, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [false, true, true, false, true, true, false]]; break; case 'C' : theLed = [[false, true, true, true, true, true, false], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [false, true, false, false, false, true, false]]; break; case 'D' : theLed = [[true, true, true, true, true, true, true], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [false, true, true, true, true, true, false]]; break; case 'E' : theLed = [[true, true, true, true, true, true, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [true, false, false, false, false, false, true]]; break; case 'F' : theLed = [[true, true, true, true, true, true, true], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [true, false, false, false, false, false, false]]; break; case 'G' : theLed = [[false, true, true, true, true, true, false], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [true, false, false, false, true, false, true], [true, true, false, false, true, true, true]]; break; case 'H' : theLed = [[true, true, true, true, true, true, true], [false, false, false, true, false, false, false], [false, false, false, true, false, false, false], [false, false, false, true, false, false, false], [true, true, true, true, true, true, true]]; break; case 'I' : theLed = [[false, false, false, false, false, false, false], [true, false, false, false, false, false, true], [true, true, true, true, true, true, true], [true, false, false, false, false, false, true], [false, false, false, false, false, false, false]]; break; case 'J' : theLed = [[false, false, false, false, false, true, false], [false, false, false, false, false, false, true], [true, false, false, false, false, false, true], [true, true, true, true, true, true, false], [true, false, false, false, false, false, false]]; break; case 'K' : theLed = [[true, true, true, true, true, true, true], [false, false, false, true, false, false, false], [false, false, true, false, true, false, false], [false, true, false, false, false, true, false], [true, false, false, false, false, false, true]]; break; case 'L' : theLed = [[true, true, true, true, true, true, true], [false, false, false, false, false, false, true], [false, false, false, false, false, false, true], [false, false, false, false, false, false, true], [false, false, false, false, false, false, true]]; break; case 'M' : theLed = [[true, true, true, true, true, true, true], [false, true, false, false, false, false, false], [false, false, true, false, false, false, false], [false, true, false, false, false, false, false], [true, true, true, true, true, true, true]]; break; case 'N' : theLed = [[true, true, true, true, true, true, true], [false, false, true, false, false, false, false], [false, false, false, true, false, false, false], [false, false, false, false, true, false, false], [true, true, true, true, true, true, true]]; break; case 'O' : theLed = [[false, true, true, true, true, true, false], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [false, true, true, true, true, true, false]]; break; case 'P' : theLed = [[true, true, true, true, true, true, true], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [false, true, true, false, false, false, false]]; break; case 'Q' : theLed = [[false, true, true, true, true, true, false], [true, false, false, false, false, false, true], [true, false, false, false, true, false, true], [true, false, false, false, false, true, false], [false, true, true, true, true, false, true]]; break; case 'R' : theLed = [[true, true, true, true, true, true, true], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [false, true, true, false, true, true, true]]; break; case 'S' : theLed = [[false, true, true, false, false, false, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [true, false, false, false, true, true, false]]; break; case 'T' : theLed = [[true, false, false, false, false, false, false], [true, false, false, false, false, false, false], [true, true, true, true, true, true, true], [true, false, false, false, false, false, false], [true, false, false, false, false, false, false]]; break; case 'U' : theLed = [[true, true, true, true, true, true, false], [false, false, false, false, false, false, true], [false, false, false, false, false, false, true], [false, false, false, false, false, false, true], [true, true, true, true, true, true, false]]; break; case 'V' : theLed = [[true, true, true, true, true, false, false], [false, false, false, false, false, true, false], [false, false, false, false, false, false, true], [false, false, false, false, false, true, false], [true, true, true, true, true, false, false]]; break; case 'W' : theLed = [[true, true, true, true, true, true, false], [false, false, false, false, false, false, true], [false, false, false, false, true, true, false], [false, false, false, false, false, false, true], [true, true, true, true, true, true, false]]; break; case 'X' : theLed = [[true, false, false, false, false, false, true], [false, true, true, false, true, true, false], [false, false, false, true, false, false, false], [false, true, true, false, true, true, false], [true, false, false, false, false, false, true]]; break; case 'Y' : theLed = [[true, false, false, false, false, false, false], [false, true, false, false, false, false, false], [false, false, true, true, true, true, true], [false, true, false, false, false, false, false], [true, false, false, false, false, false, false]]; break; case 'Z' : theLed = [[true, false, false, false, false, true, true], [true, false, false, false, true, false, true], [true, false, false, true, false, false, true], [true, false, true, false, false, false, true], [true, true, false, false, false, false, true]]; break; default: theLed = [[false, false, false, false, false, false, false]]; } return theLed; } var fps = 30; // The message you wish to display var myMessage = textToLED('jQuery Script Net'); var leftPointer = SCROLLER_LENGTH + 1; var rightPointer = 0; var furthestLeftPoint = 0 - myMessage.length; function draw() { setTimeout(function() { requestAnimationFrame(draw); clearLights(); if(leftPointer==furthestLeftPoint){ leftPointer = SCROLLER_LENGTH + 1; } drawMessage(myMessage, leftPointer); leftPointer--; }, 1000 / fps); } draw();
This awesome jQuery plugin is developed by timkim. For more Advanced Usages, please check the demo page or visit the official website.