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.
+4
A:
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:
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.)
Blixt
2009-08-03 11:24:17
I'd prefer that the text be able to rotate.
this is a dead end
2009-08-03 12:32:42
If you look at the example above you'll see that it *is* possible to have text move along a path and rotate using only JavaScript, but you won't have rotation support for older (or even pretty recent) browsers. The moving-along-a-path part works in all browsers though.
Blixt
2009-08-03 14:04:16
Oh, and if you do use something like this, I would recommend putting the path in the interface-related part of your JavaScript. The path does not add value to the content and should not be placed in the HTML, I just did it because I wanted to try it and see how well it worked across browsers (and it turns out that it works in all of the top browsers.)
Blixt
2009-08-03 14:19:30
+1 For the implementation. It turned out very nice =).
Maiku Mori
2009-08-03 14:22:20
That does look very nice thanks.
this is a dead end
2009-08-03 15:14:44
Thanks so much for that one script. It really helped me a lot. I edited it a bit though. Since the path I had in mind was mostly circular, I wrote a script that would calculate the coordinates of the circumference of a circle.http://www.oroly.com/tmp/circle.phpFor efficiency sake I thought I would put these coordinates in the script already calculated, the angle is also calculated.There's a few more things I wanted to do to it like make it slow down as it reaches the end and be able to append a new string onto it but it already lags a bit for me. Probably because of all the characters.
this is a dead end
2009-08-05 17:01:53
You can see the changes I've made here.http://www.oroly.comThere's a few more minor changes. I prevented it from looping around, I only want to display the string once. All the characters start in the beginning coordinates. This allows me to put a string longer than the path.I initially had in mind about 3 of these circular paths with one moving in the opposite direction from the other two. But now because of the lag, I might have to do this effect in a straight horizontal line, or scrap it.
this is a dead end
2009-08-05 17:06:59
Neat! Looks really cool! `=)`
Blixt
2009-08-05 22:06:57
A:
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.
Maiku Mori
2009-08-03 11:24:54
I know that generally using marquee can be very annoying. But I wanna see if I can modify it and make it look good with the rest of the site. Also, this scrolling text will be part of the background/design, not the content.
this is a dead end
2009-08-03 12:02:30
Well I don't see anything bad in using JavaScript/HTML to do animation. I'm just saying that there's a reason why so many people disable animated gifs and [blink] tags =). My answer, same as Blixt's, is accurate. It's doable, but would take a lot less effort in Flash then JavaScript.You would have to split each character in the text in separate elements and animate each of them separately or use canvas. If you don't use canvas you can't rotate html elements (just move em on x/y axes) unless you use Level 3 css which is not yet supported by all browsers.
Maiku Mori
2009-08-03 12:17:32
Also to move them along some path you would have to figure out how to represent the path using a mathematical function. Depending on complexity of the path there are different approaches to do that. From your question I assume the path isn't something simple such as circle. You may want to check out http://en.wikipedia.org/wiki/Polynomial_interpolation and http://en.wikipedia.org/wiki/Spline_(mathematics) If you still haven't got enough pointers from our answers to actually code it, you're probably better off with flash where it takes just few mouse click to do it.
Maiku Mori
2009-08-03 12:32:46
I see. Well then maybe I shouldn't make the text curved and angled and should just stick with plain horizontal text. That way I won't have to make each character into an element but rather chunks of text. I don't know how good this will look though, it might just turn out annoying after all. I'll experiment.
this is a dead end
2009-08-03 12:34:58
If you want to rotate the characters you will have to find tangent for each characters current location on the path. http://en.wikipedia.org/wiki/Tangent
Maiku Mori
2009-08-03 12:39:32