How can I make an animation that includes text in CSS?

[schreiberbj]

I’m making a website for a group I’m in. I had an idea for a splash page, but I’m not sure how to implement it. Basically, when you go to the webpage it will look like a terminal. Black background, blinking white cursor. Then text will look like it is being entered. The text will then move up a line, it will pause, then a lot of text will stream by from bottom to top. Then it fades into the site.

No part of this is really interactive, it’s just an animation. However, I would like to make it so that pressing any key skips the animation. Is any of this even possible in css, or will I have to use javascript? If it is possible, what sort of tutorials should I be looking at to learn how to make it? Does this even sound like a good idea? Any advice at all would be appreciated.

[Paulie_D]

Frankly, you can’t get what you want with pure CSS without a heck of lot of work.

I have no doubt that you could do it with JS but to be honest, if you must have a splash page (and they are sooo last century) then, in this instance, Flash would probably be the way to go.

[schreiberbj]

I don’t have a flash license, nor do I really want one. I guess I’ll have to bite the bullet and take some time to learn javascript. The reason I wanted a splash page like this is that I want the page to stand out. It will eventually be entered into a competition and judged alongside other similar sites. They are all going to be pretty similar, so anything unique will help. Thanks for answering my question.

[Author]

Posts