Geek Answers Handbook

How to create a text scroll animation using only HTML and CSS (or java, which I think), for example, like an apple that was used for their live image?

I have a banner at the top of my site, blue with a slight radial gradient on the left side.

I want to have animated white text that scrolls to the right of the banner. I want it to fade when it appears and then disappears. I would like to do this without using Flash and as little Java as possible. I can go my way through CSS and customize the layout, but I don't know how to encode it for the animation to work.

I would also like the white text to become the headline and a very brief summary of the latest blog posts for the site. (probably an RSS summary). I don’t know if this is easy to code or if I will need to pass the code every time I get a new blog post.

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

+5
source share
3 answers

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

Update

- JavaScript. keyframes . : () http://jsfiddle.net/jonathansampson/XxUXD/ () http://jsfiddle.net/jonathansampson/h7SYp/.

, text-indent: 100%, . text-indent: -100% , ( ).

- Javascript. HTML - , CSS - . . , javascript, ​​ jQuery, HTML , .

Cycle Plugin jQuery.

+10

JavaScript, flash java.

JQuery . JavaScript, JavaScript. , jQuery, , , - JQuery Marquee

+3

You will definitely need to use JavaScript if you do not want to use Flash. You cannot do this without a program.

It’s best to look at the animation library.

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

0
source

More articles:


All Articles