Home / Advanced JavaScript Tutorials / Creating a dot-matrix scroller using JavaScript

 

 

Partners
Save big on iPage's shared and Wordpress hosting with our March coupons!
iPage March coupons
Save big on iPage's shared and Wordpress hosting with our March coupons!
iPage March coupons
Facebook Fan Page


Creating a dot-matrix scroller using JavaScript

This tutorial is written and contributed by Ray Mortimer. Visit's Ray's homepage here.

A good way to enhance a static web page is to give it some animation. The question is what? It is too easy to go overboard and animate everything and end up with a very distracting scene. When I was looking for something for the index page of my site, I wanted something simple that could be updated easily and could actually be useful as well. Then I saw a scrolling information display at a local rail station and realized that this was a good way of displaying quite a lot of information in a small space. On a web page it would look quite impressive as well as being informative.

A scrolling text display is available in HTML, the marquee. It is quite basic and only uses text, which means you can only safely use the usual old Arial and Times new Roman fonts. With the dot-matrix scroller, each character is stored as a bitmap and displayed in the right location using JavaScript. This piece of JavaScript runs a few times every second moving the characters and creating the scrolling effect. Here's an example of a dot-matrix scroller:

This scroller has been tested with version 4 of Internet Explorer and Netscape on the PC

-Tutorial introduction
-How it works
-Show me the entire script source
-Show me step by step how to add the scroller to my site

How it works


http://www.javascriptkit.com
CopyRight © 1997-2000 JavaScript Kit. NO PART may be reproduced without author's permission.