6

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.

3 Answers 3

12

Update: 10/21/2015: The following answer required you to explicitly provide values such as 100em in order to achieve offsets. This is not ideal. Instead, you can translate the element.

Update

You can indeed do this today without flash or JavaScript. You can use the keyframes feature in modern browsers to move text in modern browsers. I took the liberty to work up a quick demo demonstrating the concept: (horizontal) http://jsfiddle.net/jonathansampson/XxUXD/, and (vertical) http://jsfiddle.net/jonathansampson/h7SYp/.

Essentially we set the initial starting-point of the animation to text-indent: 100% to set it out of view and to the right. Then we set the last frame to text-indent: -100%, or whatever is needed to hide the text (will vary depending on character-length).

Old Answer

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.

3
  • this one doesn't seem to work with just raw text, or am I missing something?
    – Maslow
    Jan 18, 2013 at 15:54
  • @JonathanSampson with chromium v. 22 and midori v. 0.4.3 on raspberry with raspbian
    – Tab
    Jan 4, 2014 at 13:42
  • The latest version (translating the element) gets faster the longer the text you put in it...
    – Adam
    Nov 14, 2017 at 13:33
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

3
  • Agreed. Don't be intimidated by jQuery as a novice web developer either, it's very easy to use.
    – Daniel
    Jan 25, 2010 at 22:25
  • does javascript run on the iphone?
    – Joshua
    Jan 25, 2010 at 22:35
  • Yes Safari on the iPhone handles JavaScript fine
    – Weatherman
    Jan 26, 2010 at 19:40
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.