views:

21

answers:

2

The page would be white with the shape of the Taj Majal punched out (i.e., a mask) with the letters scrolling from right to left on a layer below the mask. See a visual comp here.

Each line of text should scroll independently, and loop around when it reaches the left edge.

I've looked at SVG, HTML5/canvas, and jQuery marquee. Is one of these especially suited for this?

A: 

You could probably use layered DIVs with transparent graphics to achieve this in a browser.

jQuery provides a good implementation of marquee behavior for text - all you would have to do is layer a PNG with a transparent region where you want to display text and white pixels where you want to mask it out. The image would be position above the marquee DIV in the z-order.

Both HTML5 and SVG could likely also support this behavior, although it would take more work on your part since I'm not aware of prebuilt components that implement marquee behavior for either. You will also end up with a page that will be visible to a smaller audience since neither SVG nor HTML5 are very widely available.

LBushkin
A: 

Basic HTML should be quite enough for this. Avoids are browser incompatibilities as well. Just have a big image (PNG or GIF) with a transparent mask area absolutely positioned over a bunch of lines of text .

You'll need to duplicate each line vertically enough many times to make them fill the visible area twice if you want them to loop around seamlessly. After you've done that, just move the each line with a timer. This might be the most efficient to do without using any library animation methods and just rolling your own quickly, but using any kind of marquee method on each line separately should also work.

Matti Virkkunen