カラフルな電光掲示板を作成するjavascript「led scroller」

街を彩るLED電光掲示板をjavascriptでも実現できるようになりました。
led scrollerを利用すれば訪問者にインパクトを与えることができそうです。

使用方法
led scrollerからファイル一式をダウンロードします。
<link rel="stylesheet" type="text/css" href="http://yourdomain/ledstyles.css" />
<script type="text/javascript" src="http://yourdomain/ledscroller.js"></script>
<script type="text/javascript" src="http://yourdomain/chardefs-6x6.js"></script>
＊画像のパスは必要に応じて、ledscroller.jsの15行目で変更してください。
さらに、電光掲示板の元となるスクリプトを以下のように記述します。
<script type="text/javascript">
var ledSize = 16; //LEDのサイズ（16, 32, 48, 64, 128）
var ledPadding = 1; //LED間のスペース
var ledColor = 'rainbow'; //LEDの色（'red, 'amber', 'yellow', 'green', 'blue', 'uv' (purple), 'white', or 'rainbow'）
var scrollDelay = 100; //スクロール速度（大きいほど遅い）
var blurLevel = 0.25; //ぼかし（高いほどぼかしが濃い）
createLedMatrix(24,6); //最初の数字はディスプレイの横幅
setMessage("Scrolling! It's scrolling!!"); //メーッセージです（日本語不可）
scroll();
</script>
最後に表示したい場所に以下を書き込めば完成です。
<div id="ledSet"></div>
＊なお、上記に記述したスクリプトは全て、このdiv以下に記述してください。
カラフルな電光掲示板を作成するjavascript「led scroller」サンプル

2007年12月05日

前の記事：Movable Typeで手軽に訪問者数などを確認するプラグイン「Visitor Stats」
次の記事：Appleぽい画像ギャラリーjavascript「MooFlow」

関連記事

• シンプルなニュースティッカーjavascript「aScroller」
• jQueryベースのニュースティッカーjavascript「liScroll」
• マウスウィールでも横スクロールするjavascript「horizontinyscrolling.js」
• [jQuery]spinner
• [jQuery]SerialScroll

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」