How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

Question

I have a banner at the top of my website that is blue with a light radial gradient on the left side.

I want to have white text animated that scrolls up on the right side of the banner. I want it to fade in as it appears and then fade back out. I would like to do this without the use of Flash, and as little Java as possible. I can work my way through CSS and set up the layout, but I don't know how to code it so that the animation will work.

I'd also like the white text will be the titles and a very brief summary of recent blog posts for the site. (probably the RSS summary) I don't know if that's easy to code into it or if I'll need to hand code that every time I have a new blog post.

After some basic research I think what I'm looking for is HTML 5 canvas, but I'm not sure.

Answer 1

You won't be able to do this without flash or Javascript. HTML is structure, while CSS is presentation. Neither of the two provide animation-capabilities. I would suggest you go a route that includes a small javascript framework like jQuery, as this can convert standard HTML into the animated effect that you desire.

I would encourage you to look into the Cycle Plugin for jQuery.

Answer 2

You'll certainly need to use JavaScript, unless you want to use Flash. You cannot do it without a program.

Your best bet is to look into an animation library.

Scriptaculous can do everything you describe, but doing what you describe is not for a JavaScript beginner.

Answer 3

What you need is JavaScript rather than flash or java.

JQuery is ideal for this type of animation. It's a JavaScript library that simplifies writing such JavaScript functions. There are many plug-ins available for jQuery that give similar functionality to what you require - have a look at JQuery Marquee