How can I make dynamic text scroll on a curve in HTML/Javascript/CSS?

Question

I'm trying to make dynamic text scroll on the page. I want it to scroll on a curved and angled surface just for design sake. Will I have to use flash for this? Because I'd rather not.

Answer 1

Should the characters rotate with the curve? Getting the characters of a text to follow a curved path (without rotating) is possible with JavaScript. If the text should rotate you could do it with VML/SVG/Canvas, but in that case you might just be better off with Flash.

This isn't exactly what you're after, but have a look at how the text behaves and you'll see what I mean by not rotating: http://s.blixt.org/physics-enabled-html/

---

I got an idea to make something that may, or may not be what you thought about, but it might be of help to you:

http://blixt.org/js/path.html

It looks for elements with the data-path attribute ( HTML 5: data-* attributes ) and parses it to create a path for the text to move along.

I also updated it to include rotation using CSS3 for the browsers that support it (recent Mozilla and WebKit browsers.)

Answer 2

Well you could animate each single letter or pair of letters. It's doable but it would be a lot more effective/faster with Flash. You would have to make mathematical representation of the curve.

Is it really necessary? Flashing/moving text isn't really considered good design practice. Of course there are exceptions.

Edit:

See comments for more pointers to solution.